如何在功能组件的状态对象中使用 setState？答案

【问题标题】：how can i use setState in state object within functional component?如何在功能组件的状态对象中使用 setState？
【发布时间】：2021-11-23 08:41:06
【问题描述】：

如果我在这样的功能组件中使用状态对象：

  const state = {
    stage: useState(1),
    players: useState([]),
    result: useState(""),
  };

那么我将如何定义 setState 函数并使用它？提前谢谢

【问题讨论】：

如果你有复杂的状态，我建议你使用 useReducer Hook。

标签： reactjs state setstate react-functional-component

【解决方案1】：

我更喜欢使用单个 useState 调用拥有一个具有 3 个属性的单个状态对象。

let [game,updateGame] = useState({stage: 1, players: [], result: ''});

我会犹豫使用 state 作为变量名，因为当其他开发人员第一次查看代码时可能会造成混淆。

你可以按如下方式更新：

function goToNextLevel() {
    updateGame(game=> {
        if(game.stage == 12) {
            return {...game, result: 'win'};
        } else {
            return {...game, stage: game.stage+1};
        }
    });
}

【讨论】：

【解决方案2】：

这是三个完全独立且唯一的状态，必须单独设置。

useState 返回一个包含两项的数组。第一项是状态值，第二项是用于设置该状态的函数。

所以有了这个state 对象，你会得到状态值：

state.stage[0] // get "stage" value

并设置状态：

state.stage[1](newStage) // set "stage" value

但这不是 React 应用程序的典型结构，因为试图记住你应该使用 [0] 还是 [1] 非常难看。

相反，这通常是这样布置的：

const [stage, setStage] = useState(1),
const [players, setPlayers] = useState([])
const [result, setResult] = useState("")

现在读取状态就像stage 一样简单，设置它就像setStage(newStage) 一样简单。

【讨论】：