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

Question

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

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

那我怎么才能定义和使用 setState 函数呢？提前致谢

Answer 1

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

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

因此，对于这个 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) 一样简单。

Answer 2

我更喜欢使用单个 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};
        }
    });
}

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

how can i use setState in state object within functional component?

state

setstate

reactjs

react-functional-component