javascript - オブジェクトのReact redux状態配列では、状態を更新できませんエラーが発生しますディスパッチ間で状態の突然変異が検出されました

Question

状態をディスパッチするコンポーネント

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

アクション

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

減速機

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;
  }
}
        

redux 内のサンプルデータ

エラーが発生 していますパスで、ディスパッチ間で状態の変化が検出されましたpersonalInfoReducer.0.0.firstName。これにより、不適切な動作が発生する可能性があります。