Redux 更新嵌套数据 [不可变更新模式]

IT技术 reactjs ecmascript-6 redux immutability
2021-05-05 04:00:20

任何人都可以帮助解决此更新模式。我没有使用任何库，如 immer。

我必须更新嵌套对象，数据看起来像 dis

样本数据

    { 
      isFetching: false
      data:{
            nba : {
                    stack :{
                            1:[]
                           }
                  }
           }
    }

我的减速机

 {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...state[action.payload.team],
            [action.payload.framework]: {
              ...state[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
 };

我可以更新到第二级，但无法更新第三个孩子。任何人都可以指出我错过它的地方。

我在codeandbox上放了一个演示。 https://codesandbox.io/s/todos-0ygrs

单击折叠和内部折叠项目。我正在下面的控制台中记录状态的更改。正如您在上一级别所看到的，内部版本号正在被新版本号所取代。

展开 nba 和所有三个孩子后的当前行为

  {
    nba: {
           stack:{
                  3:[]
          }
  }

预期行为： 在您展开堆栈和所有三个孩子之后

 {
    nba: {
           stack:{
                   1:[],
                   2:[],
                   3:[]
               }
         }
   }
2个回答

您可能必须使用get 助手，因为您可能会尝试设置尚不存在的状态的一部分。

使用 get 助手，您可以像这样设置状态：

const { team, framework, build, resp } = action.payload;
const newState = {
  ...state,
  isFetching: false,
  data: {
    ...get(state, ['data']),
    [team]: {
      ...get(state, ['data', team]),
      [framework]: {
        ...get(state, ['data', team, framework]),
        [build]: resp,
      },
    },
  },
};

不知怎的，我发现了我的错误，希望它在未来对某人有所帮助

初始状态不应该为空，它应该是空对象，更新模式应该是这种方式

 {
    ...state,
    isFetching: false,
    data: {
      ...state.data,
      [action.payload.team]: {
        ...state.data[action.payload.team],
        [action.payload.framework]: {
          ...state.data[action.payload.team][action.payload.framework],
          [action.payload.build]: action.payload.resp
        }
      }
    }
  };

如果失败，则尝试这种方式

let teamTemp = { ...state.data[action.payload.team]}

     {
        ...state,
        isFetching: false,
        data: {
          ...state.data,
          [action.payload.team]: {
            ...teamTemp ,
            [action.payload.framework]: {
              ...teamTemp[action.payload.framework],
              [action.payload.build]: action.payload.resp
            }
          }
        }
      };

我已经分叉了我的代码和盒子并更新了最新的代码。

其它你可能感兴趣的问题
上一篇在 React 应用程序的 shell 脚本中设置环境变量 下一篇Apache 服务器上的 React、js