React状态管理：如何将lastName数组转换为Person类型数组及实现嵌套展开映射

很简单，核心思路就是把每个lastName元素转换成符合Person类型的对象，再和原有的状态数组合并。咱们直接看代码怎么实现：

在addNewPersons函数里，调用setPersons时，利用数组的map方法遍历传入的lastName数组，给每个元素补充Person类型要求的name和age字段（你可以根据业务需求设置默认值或者动态生成这些值），然后用展开运算符把转换后的数组和原状态数组合并成新数组。

完整的代码示例如下：

type Person = { name: string, lastName: string, age: number }
function MyComponent() {
  const [persons, setPersons] = useState<Person[]>([])
  
  function addNewPersons(lastName: string[]): void {
    setPersons((prevState: Person[]) => [
      ...prevState,
      // 把每个lastName映射为合法的Person对象，按需修改name和age的取值逻辑
      ...lastName.map(lastName => ({
        name: '', // 这里可以设置默认名字，或者从其他地方获取动态值
        lastName,
        age: 0 // 同理，设置默认年龄或动态生成
      }))
    ]);
  }
  
  return <></>;
}

额外说明几点：

• 一定要确保映射后的对象严格符合Person类型定义，否则TypeScript会抛出类型错误
• 如果name和age不是固定默认值，比如需要根据业务规则生成，直接在map的回调函数里修改对应字段的逻辑即可
• 这种写法遵循了React的状态不可变性原则，我们没有修改原有的prevState，而是创建了一个包含旧数据和新数据的全新数组，这是React状态更新的正确姿势

内容的提问来源于stack exchange，提问作者julian.a