时间戳

首页 > 解决方案 > 在 React.useReducer 中更新状态时使用哪种方法

javascript - 在 React.useReducer 中更新状态时使用哪种方法

问题描述

让我们想象一个简单的减速器：

const [state, setState] = React.useReducer(myReducer, {})

并且myReducer只有一个案例（简化版）：

const myReducer = (state, action) => {
  switch (action.type) {
    case 'UPDATE_STATE': {
      // Code to update here...
    }
  }
}

现在，以下哪个语句最适合更新状态 - 以及原因：

注意：payload= state。

方法一

case 'UPDATE_STATE': {
      const updatedState = action.payload

      updatedState.object = true

      return updatedState
    }

方法二

case 'UPDATE_STATE': {
      const updatedState = action.payload

      updatedState.object= true

      return { ...state, updatedState }
    }

方法 3

case 'UPDATE_STATE': {
      const updatedState = action.payload

      updatedState.object= true

      return { ...state, ...updatedState }
    }

方法 4

case 'UPDATE_STATE': {
      return ({ ...state, object: true })
    }

标签： javascriptreactjsreact-hooks

解决方案

我认为你应该使用方法 4。你不是在这里改变状态，这是 React 的方式。

case 'UPDATE_STATE': {
      return ({ ...state, object: true })
    }

注意：Spread 运算符...最多只能创建一个级别的不同引用。

编辑：根据评论，这里是一个简单的例子，说明你如何改变状态，即使是最简单的对象，如果你不使用....

let state = { object : true};
let payload = state;
state.object = false;
console.log(state);
console.log(payload);

即使...你可能有深层嵌套的对象。他们会有同样的问题，除非你想在每个层面上传播。有一些库可以帮助您处理诸如 immutable.js 之类的深层对象。

推荐阅读