Question

我正在获取 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 的响应，我有我的数组，因为它是随机的项目。

Answer 1

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

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

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

Answer 2

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

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

UseState 随机返回数据

2 个答案: