我正在使用 DRF 创建 api.. 我能够使用 axios 获取数据,但它第一次返回未定义,因此,当我使用 useState
时,它被设置为未定义..
ItemDetail.js:
import React, { useState, useEffect } from 'react'
import axios from 'axios'
const ItemDetail = () => {
const [detail, setDetail] = useState('')
const [id, setId] = useState('')
const RecipeDetail = async () => {
const res = await axios({
method: 'get',
url: `http://127.0.0.1:8000/api/recipe-detail/1`,
headers: {
'Content-Type': 'application/json;charset=UTF-8',
"Access-Control-Allow-Origin": "*",
}
})
setDetail(res.data)
}
useEffect(() => {
RecipeDetail()
}, [id])
console.log(`Hi ${detail}`)
return (
<div>
Hi
</div>
)
}
export default ItemDetail
那么为什么API第一次返回undefined呢?
我读了一些关于使用 async/await 的答案。此外,当我 console.log(detail)
时,它会多次记录它。为什么会这样?
正如你在图片中看到的,它记录了多次..
最佳答案
import React, { useState, useEffect } from 'react';
import axios from 'axios';
const ItemDetail = () => {
const [detail, setDetail] = useState('');
const RecipeDetail = async () => {
const res = await axios({
method: 'get',
url: 'http://127.0.0.1:8000/api/recipe-detail/1',
headers: {
'Content-Type': 'application/json;charset=UTF-8',
'Access-Control-Allow-Origin': '*',
},
});
setDetail(res.data);
};
useEffect(() => {
RecipeDetail();
}, [detail]);
console.log(`Hi ${detail}`);
return (
<div>
{detail ? 'Hi' : 'Loading ... '}
</div>
);
};
export default ItemDetail;
关于reactjs - axios get请求在React中第一次返回undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/68495969/