当我使用 useState 时，React 图像滑块不起作用答案

【问题标题】：React image slider does not work when i use useState当我使用 useState 时，React 图像滑块不起作用
【发布时间】：2022-12-12 09:40:49
【问题描述】：

我使用反应图像滑块image slider

问题是，当我像在代码示例中那样存储图像路径时，它工作正常

const images = [
  { url: "1.jpg" },
  { url: "2.jpg" }
];

但是当我使用它时，图像滑块不起作用

    const [imagePath, setImagePath] = useState([]);
    const fetchData = async () => {
            const images = await (await MessageService.getImagesById(location.state.message)).data; //here i get data from db
            const imagesPath = images.map(i => ({url: i.url}))
            setImagePath(imagesPath);
            console.log(imagesPath);//[ {url: "1.jpg"}, {url: "2.jpg"}]
}
        };
        useEffect(() => {
            fetchData();
        });

【问题讨论】：

标签： javascript reactjs image-slider

【解决方案1】：

在 React 中设置状态就像一个异步函数。
这意味着当您设置状态并在它后面放置一个 console.log 时，它可能会在状态实际完成更新之前运行。

例如，您可以改为使用依赖于相关状态的 useEffect 挂钩，以便查看状态值实际上是否按预期获得更新。

例子：

useEffect(() => {
   console.log(imagesPath)
   // Whatever else we want to do after the state has been updated.
}, [imagesPath])

此 console.log 仅在状态完成更改并发生渲染后才会运行。

注意：示例中的“imagesPath”可与您正在处理的任何其他状态片段互换。

查看 documentation 了解更多信息。

【讨论】：