UseState 随机返回数据答案

【问题标题】：UseState returning data randomlyUseState 随机返回数据
【发布时间】：2021-02-09 15:42:35
【问题描述】：

我正在获取一个 API 并设置一些项目：

  const [items, setItems] = useState([]);

    function displayUser() {
      axios({
        // fetching logic ..
        },
      }).then((res) => {
        // result are return ..
        console.log("RESPONSE: ", res);
         // I wish to set items here 
        setItems(res.data[0]);
      });
    }


 useEffect(() => {
   displayUser() // executing my function

 }, []);

    useEffect(() => {
      console.log("ITEMS AFTER: ", items);
    
    }, [items]);

api每次都返回结果，但不是每次都设置items，很随意，不知道是什么问题。

如果我通过控制台记录 API 的响应，我有我的数组，因为它是随机的。

【问题讨论】：

您可以粘贴响应示例吗？

标签： reactjs react-hooks

【解决方案1】：

setItems()是异步方式，在setItems()之后无法立即获取更新值。

您应该使用另一个 useEffect 并添加一个 items 依赖项来检查更新的状态值。

useEffect(() => {
  console.log("ITEMS: ",items)
}, [items]);

【讨论】：

谢谢，我得到了结果，但是我怎样才能让我的displayUser() 函数也能正常工作呢？到目前为止，它正在使用第二个useEffect 打印到控制台，但如果我运行该函数，它只会进入无限循环，谢谢！
您的代码是正确的，您无法在setItems(res.data[0]); 之后立即获取项目的更新值。你应该使用 useEffect 来检查状态。
所以基本上我的功能需要重新设计？
不，你不需要重新设计，只要检查项目是否为空，看看是初始值还是更新值。

【解决方案2】：

由于items 是一个数组，你可能会看到这个issue。我建议使用JSON.stringify(items) 作为依赖项。

useEffect(() => {
  console.log("ITEMS: ",items)
}, [JSON.stringify(items)]);

【讨论】：