使用 useffect 和 redux 时反应无限循环

Question

I'm setting a radux state with an object, the get the value from the store and print it on screen

I'm using useState and use 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))
    })
}

reducer

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

action

export const saveUserInfos = userInfos => {

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

I get this error

Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdate. React limits the number of nested updates to prevent infinite loops.

Answer 1

You need to call redux action in useEffect, like below,

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

Your code goes in infinite loop because props.saveUserInfos(authContext.getCachedUser()) update your component props and when your component's props is update then it will be remount or re-render again

Hope this answer helps you!

Answer 2

props.saveUserInfos(authContext.getCachedUser()) is executed each time the component re-renders. It triggers a redux action dispatch that manipulates redux store which in turn triggers re-render of AvatarContainer component. Then, saveUserInfos is executed so the process repeats and effectively enters infinite loop.

To resolve your issue you need to change the logic when the actual save is done. A starting point - depending on what you want to achieve - might be to move into into effect that triggers on internal state change:

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

This way, external store's state will be synchronized each time internal state changes.