在获取调用中设置状态会使我未定义

Question

嗨，我试图在我的fetch调用中设置一个状态，当我试图访问该状态时，它返回未定义。我不知道为什么会这样，有人能帮上忙吗？

var [articlearray, setArticle]= React.useState([]);

var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({headline: props.headline})
};

fet(options)

function fet(options){

fetch('/headlines', options).then(response => response.json()).then(data =>{


var newsData = data.newsArray

setArticle(newsData)


})

}
console.log(articlearray[0]);

Answer 1

您可以使用useEffect从API端点加载所有数据。useEffect上的emtpy数组[]意味着它将在生命周期开始时运行一次。

var [articlearray, setArticle] = React.useState([]);
const fetchData = async () => {
var options = {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
headline: props.headline
})
};
fetch('/headlines', options).then(response => response.json()).then(data => {
var newsData = data.newsArray;
setArticle(newsData);
console.log(articlearray[0]);
})
}
useEffect(() => {
fetchData();
}, []);