reactjs - Dispatch 覆盖 React Js 中的完整存储

Question

我有一个应用程序，它存储来自不同组件的输入数据。另外，我正在使用 useReducer。当我发货时 dispatch({type: "ADD_SONG", payload}) ，我从商店的状态正在改变，从

fruits: (1) [{…}]
people: (3) [{…}, {…}, {…}]
new_fruit: {}
new_car: {}
song_list: (2) [{…}, {…},{…}]
new_song: {}

到:

song_list: (3) [{…}, {…}, {…}]
__proto__: Object

上面的代码我在控制台中得到。
Action 创建者:dispatch({type: "ADD_SONG", payload})
reducer :

   case 'ADD_SONG': {
      return {
        ...state,
        new_song: {
          songId: payload.songId,
          name: payload.name,
        },
      }
    }

为什么，当我调度时，我会覆盖整个商店？可能是什么问题呢？

Answer 1

这可能是问题所在:

在处理状态的 reducer 中，请确保不要返回只有 song_list 的新对象。 .

你可能有这样的事情

const yourReducer = (state, action) => {
 switch(action.type) {
  case 'SOMETYPE':
   return { song_list: action.payload };
 }
}

那应该是

const yourReducer = (state, action) => {
 switch(action.type) {
  case 'SOMETYPE':
   return { ...state, song_list: action.payload };
 }
}