时间戳

首页 > 解决方案 > Dispatch 覆盖 React Js 中的完整存储

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

问题描述

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

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

至：

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

上面的代码我进入控制台。动作创建者： dispatch({type: "ADD_SONG", payload})

减速器：

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

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

标签： reactjs

解决方案

这可能是问题所在：

在你处理状态的减速器中，确保你不返回只有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 };
 }
}

推荐阅读