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

【问题标题】：How to fix React.useEffect and useCallback circular loop when updating a state?更新状态时如何修复 React.useEffect 和 useCallback 循环循环？
【发布时间】：2021-11-10 01:00:06
【问题描述】：

我正在从 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设置的，所以我没有知道在这种情况下如何做到这一点，或者即使这是可能的。

有办法解决吗？

【问题讨论】：

setPatients 是什么？
@Olivier Boissé 抱歉，只是注意力不集中，应该是setData。我已经编辑了帖子。

标签： javascript reactjs typescript react-hooks use-effect

【解决方案1】：

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

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])

【讨论】：