In React redux state array of objects i can't update the state it creates error A state mutation was detected between dispatches

Question

the component that dispatch the state

const [personalInfo, setPersonalInfo] = useState([]);
dispatch(addPersonalInfo(personalInfo));

action

import * as types from './actionTypes';
export default function addPersonalInfo(personalInfo) {
  return { type: types.ADD_PERSONAL_INFO, personalInfo };
}

reducer

import * as types from '../actions/actionTypes';

export default function personalInfoReducer(state = [], action) {
  debugger;
  switch (action.type) {
    case types.ADD_PERSONAL_INFO:
      return [...state, {...action.personalInfo}];
    case types.UPDATE_PERSONAL_INFO: {
      const newArray = [...state];
      const updatedArray = [
        ...newArray.filter((person) => person.id !== action.personalInfo.id),
        Object.assign({}, action.personalInfo),
      ];
      return [...state, {...updatedArray}];
    }

    default:
      return state;
  }
}
        

Sample data inside redux

the error am getting A state mutation was detected between dispatches, in the path personalInfoReducer.0.0.firstName . This may cause incorrect behavior.

Answer 1

您可以将每个对象分配到 Redux 中，并使用唯一的 Id 进行过滤，而不是更新对象数组。