React函数组件中将useState返回值存入state对象后如何使用setState

DevOps 小满

2026-10-1

操作方法说明

useState() 执行后会返回长度为2的数组，第一个元素是当前状态值，第二个元素是对应的状态更新函数。你当前的写法是把每个状态的完整返回数组存在了state对象的对应属性中，按以下规则操作即可：

读取状态值：取对应属性数组的第0位，例如读取stage状态写作 state.stage[0]
更新状态：取对应属性数组的第1位就是对应的更新方法，用法和常规useState的setter完全一致，支持直接传新值或者函数式更新

用法示例

import { useState } from 'react';

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

  // 轮次加1（函数式更新示例）
  const handleNextStage = () => {
    state.stage[1](prevStage => prevStage + 1);
  };

  // 新增玩家
  const handleAddPlayer = (playerName) => {
    state.players[1](prevPlayers => [...prevPlayers, playerName]);
  };

  // 直接修改结果
  const handleEndGame = () => {
    state.result[1]("红方获胜");
  };

  return (
    <div>
      <h3>当前轮次：{state.stage[0]}</h3>
      <p>玩家列表：{state.players[0].join('、')}</p>
      <p>对局结果：{state.result[0]}</p>
      <button onClick={handleNextStage}>下一轮</button>
      <button onClick={() => handleAddPlayer(`玩家${state.players[0].length + 1}`)}>新增玩家</button>
      <button onClick={handleEndGame}>结束对局</button>
    </div>
  );
}