React函数组件中使用useState更新对象类型状态的问题

我用React函数组件Account，通过useState定义了一个包含多个布尔值的对象状态。需求是实现activeHandler函数，点击时传入指定key，将状态中所有值设为false，仅把该指定key设为true。但当前实现存在未定义变量res、直接修改prevState等问题，需要调整为正确的状态更新方式。

原代码示例 #

函数组件框架 #

export default function Account() {

定义对象类型的useState状态 #

const [state, setState] = useState({
  profile: true,
  orders: false,
  returns: false,
  coupon: false,
  referrals: false,
  rewards: false,
  redeem: false,
  address: false,
});

存在问题的状态更新函数 #

function activeHandler(key) {
  setState((prevState) => {
    Object.keys(prevState).forEach((key) => {
      if (key == res) {
        prevState[key] = true;
      } else {
        prevState[key] = false;
      }
    });
    console.log(state);
    return prevState;
  });
}

调用更新函数的JSX元素 #

return (
  <>
    <li
      className={
        state.profile
          ? "py-3 px-3 border-bottom active"
          : "py-3 px-3 border-bottom"
      }
      onClick={() => activeHandler("profile")}
    >
      Profile
    </li>
    <li
      className={
        state.orders
          ? "py-3 px-3 border-bottom active"
          : "py-3 px-3 border-bottom"
      }
      onClick={() => activeHandler("orders")}
    >
      Orders
    </li>
  </>
);

原代码的问题点 #

• 未定义变量res：应该使用传入的key参数，但当前forEach循环的参数名也是key，导致变量冲突
• 直接修改prevState：React状态是不可变的，直接修改原对象会导致状态更新异常，无法触发组件重渲染
• console.log(state)：这里打印的是更新前的旧状态，因为React状态更新是异步的

修正后的完整代码 #

import { useState } from 'react';

export default function Account() {
  const [state, setState] = useState({
    profile: true,
    orders: false,
    returns: false,
    coupon: false,
    referrals: false,
    rewards: false,
    redeem: false,
    address: false,
  });

  function activeHandler(targetKey) {
    setState((prevState) => {
      // 创建全新的状态对象，确保不可变性
      const newState = Object.fromEntries(
        Object.keys(prevState).map(key => [key, key === targetKey])
      );
      console.log(newState); // 打印更新后的新状态
      return newState;
    });
  }

  return (
    <>
      <li
        className={state.profile ? "py-3 px-3 border-bottom active" : "py-3 px-3 border-bottom"}
        onClick={() => activeHandler("profile")}
      >
        Profile
      </li>
      <li
        className={state.orders ? "py-3 px-3 border-bottom active" : "py-3 px-3 border-bottom"}
        onClick={() => activeHandler("orders")}
      >
        Orders
      </li>
      {/* 其他标签页项可按同样方式添加 */}
    </>
  );
}

修正说明 #

• 重命名参数为targetKey，避免和遍历中的key变量冲突
• 使用Object.fromEntries结合map生成新状态对象：遍历原状态的所有key，每个key对应的值为key === targetKey（目标key设为true，其余自动为false）
• 打印新创建的newState，确保看到的是最新的状态值

内容的提问来源于stack exchange，提问作者Ponnu Sudesh