React中调用setSlides后无法获取最新状态的问题求助

你遇到的问题核心是React的状态更新是异步的：调用setSlides(answer.data.spotlights)之后，slides并不会立刻变成新的数组，它还是初始的null值，所以[...slides]这一步自然会出问题。

直接用API返回的原始数据来处理就好，没必要依赖还没更新的状态变量。修改后的代码如下：

//---getting data from api
useEffect(() => {
    axios
        .get(DATA_URL, headers)
        .then((answer) => {
            const spotlightsData = answer.data.spotlights;
            setSlides(spotlightsData);

            let newArr = [...spotlightsData];
            newArr.shift();
            setTrio(newArr);
            setSpolight(spotlightsData[0]);
            const interval = setInterval(() => {
                switchSpolight();
            }, 4000);
            return () => clearInterval(interval);
        })
        .catch((answer) => console.log(answer));
}, []);

简单说就是把所有需要用到这个数组的地方，都直接用answer.data.spotlights（或者先存成变量spotlightsData让代码更清晰），而不是刚调用完setSlides就去读slides状态——毕竟状态更新是异步的，不会马上生效。

如果之后有需要基于slides状态变化来执行的逻辑，那可以单独写一个监听slides的useEffect，但这里完全没必要绕这个弯，直接用拿到的原始数据最稳妥。

内容的提问来源于stack exchange，提问作者Lucas Almeida