使用 useEffect 和 redux 时反应无限循环答案

【问题标题】：React infinite loop when using useffect with redux使用 useEffect 和 redux 时反应无限循环
【发布时间】：2020-10-16 11:47:51
【问题描述】：

我正在用一个对象设置一个 radux 状态，从存储中获取值并在屏幕上打印它

我正在使用useState 并使用useEffect

const AvatarContainer = (props) => {
const [infos, setinfos] = useState(undefined);
useEffect(() => {
    console.log('in effects')

    setinfos(() => props.userInfos)

}, [props.userInfos]);
 
props.saveUserInfos(authContext.getCachedUser())

const mapStateToProps = (state) => {
    return ({
        userInfos: state.reportingActions.userInfos,
    })
}

const mapDispatchToProps = (dispatch) => {
    return ({
        saveUserInfos: (Avatar) => dispatch(saveUserInfos(Avatar))
    })
}

减速器

case 'SAVE_USER_INFOS':
   return {
       ...state,
       userInfos: Object.assign({}, action.payload.userInfos
   }

动作

export const saveUserInfos = userInfos => {

    return ({
        type: 'SAVE_USER_INFOS',
        payload: {
            userInfos
        }
    })
}

我收到此错误

已超过最大更新深度。当组件在 componentWillUpdate 或 componentDidUpdate 中重复调用 setState 时，可能会发生这种情况。 React 限制了嵌套更新的数量以防止无限循环。

【问题讨论】：

标签： javascript reactjs redux

【解决方案1】：

你需要在useEffect中调用redux action，如下所示，

useEffect(() => {
    console.log("effect done")
    if (photo === undefined) {
        setinfos(props.userInfos)
    }
    props.saveUserInfos(authContext.getCachedUser())
}, []);

您的代码进入无限循环，因为props.saveUserInfos(authContext.getCachedUser()) 更新您的组件道具，当您的组件道具更新时，它将重新安装或重新渲染

希望这个答案对你有所帮助！

【讨论】：

【解决方案2】：

props.saveUserInfos(authContext.getCachedUser()) 在每次组件重新渲染时执行。它触发了一个操作 redux 存储的 redux 操作调度，这反过来又触发了 AvatarContainer 组件的重新渲染。然后，saveUserInfos 被执行，因此过程重复并有效地进入无限循环。

要解决您的问题，您需要在实际保存完成后更改逻辑。一个起点 - 取决于您想要实现的目标 - 可能是生效以触发内部状态更改：

useEffect(() => {
    props.saveUserInfos(authContext.getCachedUser())
, [infos]);

这样，每次内部状态发生变化时，外部存储的状态都会同步。

【讨论】：