React中如何切换嵌套对象内的布尔值？

先给你修正并优化后的完整代码，再拆解关键步骤：

import { useState } from 'react';

function App() {
  const initialData = [
    {
      name: "CR7",
      Age: 37,
      instagram: {
        id: 1,
        followers: "493M",
        followed: true,
      }
    }
  ];

  // 修正：Const → const，变量名规范
  const [playersData, setPlayersData] = useState(initialData);

  // 把toggleFollow提到map外面，避免每次循环重复创建函数
  const toggleFollow = (userId) => {
    // 不可变更新状态：创建新数组，找到对应项后复制嵌套对象并切换followed
    setPlayersData(prevData => {
      return prevData.map(player => {
        if (player.instagram.id === userId) {
          // 复制整个player对象，再复制instagram对象，修改followed值
          return {
            ...player,
            instagram: {
              ...player.instagram,
              followed: !player.instagram.followed
            }
          };
        }
        return player;
      });
    });
  };

  // 修正：daplayersDatata → playersData
  const elements = playersData.map(data => {
    return (
      // 给button加key，React列表渲染要求
      <button 
        key={data.instagram.id}
        onClick={() => toggleFollow(data.instagram.id)}
      >
        {data.instagram.followed ? "已关注" : "关注"}
      </button>
    );
  });

  return (
    <div>{elements}</div>
  );
}

export default App;

关键问题拆解 #

1. 语法错误修正

   • 变量声明要小写 const，不是Const
   • 拼写错误 daplayersDatata → playersData，避免找不到变量报错

2. 状态更新的核心逻辑
   React状态是不可变的，不能直接修改playersData里的嵌套对象，必须创建新的引用：

   • 使用setPlayersData的函数式更新（prevData => ...），确保拿到最新的状态值
   • 遍历原数组，找到要更新的用户项时：
     • 用扩展运算符...player复制整个用户对象
     • 再复制嵌套的instagram对象，只修改followed的值为取反

3. 事件处理优化

   • 把toggleFollow定义在map循环外，避免每次渲染都创建新函数，提升性能
   • 点击按钮时传递用户的唯一标识（这里用instagram.id），确保能精准找到要更新的项
   • 列表渲染的元素必须加key属性，符合React的渲染规范

这样点击按钮就能正确切换followed的布尔值，触发组件重新渲染更新按钮文字了。

内容的提问来源于stack exchange，提问作者Ayman Loutfi