在 fetch 调用中设置状态让我不确定？答案

【问题标题】：Setting a state in fetch call gives me undefined?在 fetch 调用中设置状态让我不确定？
【发布时间】：2021-05-12 16:06:45
【问题描述】：

嗨，我试图在我的 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]);

【问题讨论】：

如果没有看到整个组件就不可能说，但您的console.log 可能在获取完成之前正在运行。
您的代码没有从上到下执行。您的 console.log 在您的 fetch 回调运行之前很久就执行了。此外，setArticle 是异步的，所以 articlearray 在下一个组件渲染之前将不可用。你应该习惯于使用console.log 来调试你的代码。
这很疯狂，因为它昨天对我有用。是的，我需要 POST
这能回答你的问题吗？ How to return value from an asynchronous callback function?
如果它是异步的，您知道我将如何更改它以便访问文章数组变量吗？

标签： reactjs fetch state

【解决方案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();
}, []);

【讨论】：

感谢您的回答..但由于某种原因它仍然对我不起作用...只是不让我设置变量 articlearray 的状态
我已经更新了代码。我将控制台日志移至 then 部分。它应该打印数据，如果没有，您可能需要检查端点是否正在发送正确的响应。
仍然不行...smh我想明白了...我的端点正在工作，新闻数据变量给了我想要的东西，但我无法设置文章数组的状态
它工作的问题是其他地方完全感谢您的帮助