更新状态时如何修复React.useEffect和useCallback循环？

Question

我正在从 API 中获取一些数据，但是由于我使用这些数据来更新 useEffect 中的状态，因此该状态成为必需的依赖项，这会导致循环.

state is updated -> useEffect is called -> state is updated ...

我阅读了很多相关的答案和文章，但找不到我的具体问题的答案。

这是我的初始代码：

let [state, setState] = React.useState<IDataSource[]>([])

React.useEffect(() => {
    let dataSource: IDataSource[] = []
   
    dataFetched.forEach((item, index) => {
        // Some logic
    })
    
    setState(state.concat(dataSource))

}, [dataFetched, state])

然后我决定使用 useEffect 调用的函数并传递一个参数来更新状态：

let [state, setState] = React.useState<IDataSource[]>([])

const updateData = (arg: IDataSource[] => {
    setData(state.concat(arg))
}

React.useEffect(() => {
    let dataSource: IDataSource[] = []
   
    dataFetched.forEach((item, index) => {
        //Some logic
    })
    
    updateData(dataSource)
}, [dataFetched, updateData])

这行得通，但是因为我有 updateData 作为 useEffect depency 我必须用 useCallback:

包装函数

const updateData = React.useCallback((arg: IDataSource[]) => {
    setData(state.concat(arg))
}, [state])

React.useEffect(() => {
    let dataSource: IDataSource[] = []
   
    dataFetched.forEach((item, index) => {
        //Some logic
    })
    
    updateData(dataSource)
}, [dataFetched, updateData])

但在这种情况下，我也有 state 作为 useCallback depency 我又回到了开始的问题，一个循环。

显然，当我有一个数组 useEffect dependency 时，我应该使用 React.useRef，但是 state 不仅仅是一个数组，它实际上是一个状态，它是用 useState，所以我不知道在这种情况下该怎么做，或者即使这是可能的。

有办法解决吗？

Answer 1

您可以从 useEffect 数组中删除 data 并使用像这样的更新函数调用 setState setState(prevState => prevState.concat(dataSource))

const [state, setState] = React.useState<IDataSource[]>([])

React.useEffect(() => {
    const dataSource: IDataSource[] = []
   
    dataFetched.forEach((item, index) => {
        // Some logic to fill the dataSource array ??
    })
    
    setState(prevState => prevState.concat(dataSource))
}, [dataFetched])

更新状态时如何修复React.useEffect和useCallback循环？

How to fix React.useEffect and useCallback circular loop when updating a state?

javascript

typescript

reactjs

react-hooks

use-effect