Question

我正在更新其状态后调用我的组件方法之一。我遇到的问题是，在该方法中，状态未更新。

这是我当前的代码：

const Component = () => {
    const [data, setData] = useState([]);
    ...

    const fetchData = async () => {
         ...
         const { data: newData } = await api.fetchData(...);
         ...
         setData([...data, ...newData]) // <--- Here, data is not updated, after having called handleOnSelectFilter()
         ...
    }

    const handleOnSelectFilter = (filter) => {
        // Reset data before fetching api
        setData([]);

        ...

        // Fetch data
        fetchData();
    }


    ...
}

如您所见，发生这种情况是因为在 handleOnSelectFilter 内部调用的“fetchData”实例由于 React 异步状态更新而尚未重新定义。

我该如何解决我的问题？有什么想法吗？

Answer 1

听起来好像第一个将 data 重置为空数组的 setData 可能是您认为不起作用的那个？有点不清楚。如果这是正确的，这是一个常见问题，可以使用 setData 中的箭头函数轻松解决（请参阅 Curve fitting and styling AreaChart）：

setData([]);
setData(d=> [...d, ...newData]);

在第一个 setData 之后，data 变量将失效，直到下次功能组件刷新。但是通过箭头函数/函数更新，你会得到你刚刚设置的当前值。

反应本机状态未在函数内部更新

1 个答案: