javascript 在React中调用相关setState时状态未更新

x8diyxa7 于 2023-05-05 发布在 Java

关注(0)|答案(2)|浏览(204)

我尝试从Unsplash API获取图像，然后尝试在以下代码中使用useState更新图像数据。

const [images, setImages] = useState([]);

  useEffect(() => {
    Axios.get(
      "https://api.unsplash.com/photos/?client_id=l2U-D_PXXujBJoRiCCMCL2ifi_5ZJcK4AC0WH-A2lKk"
    )
      .then((res) => {
        //res.data is printing correct/expected value
        console.log(res.data);

        setImages(res.data);
        console.log("lul");

        //but images array is still empty
        console.log("images: ", [images]); // []
      })
      .catch((err) => console.error(err));
  }, []);

如果我把images数组放在dependency数组中，那么我就可以更新image数组，但是这样抓取就无限地发生了。
为什么会发生这种情况？

JavaScript

来源：https://stackoverflow.com/questions/71004802/state-not-getting-updated-when-calling-the-related-setstate-in-react

2条答案

按热度按时间

2w3rbyxf1#

你做错的是在React重新渲染之前尝试console.log。通过相关的setState更新state并不是即时的，正如文档所说：
set函数只更新下一次渲染的状态变量。如果在调用set函数之后读取状态变量，则仍将获得调用之前屏幕上的旧值。
记录状态变化的一种方法是在定义console.log()之后添加它：

const [images, setImages] = useState([]);
// It logs [] the first time and then the fetched data
console.log(images);

useEffect(() => {
  Axios.get(
    "https://api.unsplash.com/photos/?client_id=l2U-D_PXXujBJoRiCCMCL2ifi_5ZJcK4AC0WH-A2lKk"
    )
    .then((res) => {
      setImages(res.data);
    })
    .catch((err) => console.error(err));
}, []);

赞(0）回复(0）举报 2023-05-05

0md85ypi2#

setState是异步调用的（尽管它不返回promise，所以你不能await它）。
保持你的useEffect现在的样子，为了在images改变时打印新的值，你可以使用另一个useEffect：

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

赞(0）回复(0）举报 2023-05-05

我来回答

javascript 在React中调用相关setState时状态未更新

2条答案

相关问题

热门标签

最新问答