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

Posted 2023-03-16

【中文标题】如何在功能组件的状态对象中使用 setState？

【英文标题】：how can i use setState in state object within functional component?

【发布时间】：2021-11-23 08:41:06

【问题描述】：

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

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

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

【问题讨论】：

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

【参考方案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) 一样简单。