如何向React Hook添加对象以同时存储Michael与Philip的状态数据

首先要明确：你当前的初始state是单个{name, age}结构，本身只能存1个人的信息，要同时保存Michael和Philip两个人的内容，首先要调整state的存储结构，再配合正确的setState写法。

两种常用落地方案 #

方案1：用数组存储所有人物对象（最通用） #

适合需要渲染人物列表、批量处理多个人物信息的场景：

• 第一步：调整初始useState的结构为数组，初始值直接放入Michael的信息：

export const app = () => {
  // state改为存储人物对象的数组
  const [people, setPeople] = useState([
    { name: "michael", age: 55 }
  ]);
  // 待添加的Philip的信息
  // 这里变量名避开和state属性名重名，防止作用域冲突
  const philipName = "Philip";
  const philipAge = 65;

• 第二步：添加Philip的正确写法：用函数式更新拿到旧的state数组，保留原有全部内容，再把Philip的对象追加进去：

// 正确的setState写法
  setPeople(prevList => [
    ...prevList,
    { name: philipName, age: philipAge }
  ]);

  return <div></div>;
};

• 这种写法的好处：后续渲染人物列表直接遍历数组即可，比如{people.map(p => <div key={p.name}>{p.name} 年龄：{p.age}</div>)}，非常直观。

方案2：用键值对对象存储（适合快速查找场景） #

适合需要按人名快速定位对应人物信息的场景，不需要遍历数组：

• 第一步：初始state改为对象，以人名为键，存储对应年龄信息：

export const app = () => {
  const [peopleMap, setPeopleMap] = useState({
    michael: { age: 55 }
  });
  const philipName = "Philip";
  const philipAge = 65;

• 第二步：添加Philip的写法：保留原有对象的所有属性，新增Philip对应的键值对：

setPeopleMap(prevMap => ({
    ...prevMap,
    [philipName]: { age: philipAge }
  }));

  return <div></div>;
};

• 这种写法的好处：查找某个人的信息不需要遍历，直接通过peopleMap.Philip.age就能取值，性能更高。

你原代码的问题说明：

1. 初始state为单个对象，结构本身无法承载多个人物的信息
2. setState直接写...state是语法错误，React的setState要求传入完整的新state值，直接展开单个对象会把原有属性平铺到顶层，达不到存储多个人物的效果

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