如何在TypeScript中创建指定格式动态数组？useState更新报错求助

错误原因分析 #

1. 未指定状态类型：useState([]) 未明确类型，TypeScript会推断状态为 never[]，导致后续无法推入任何类型的值。
2. 错误使用数组push方法：Array.push() 返回的是数组新长度（数字类型），不是更新后的数组，且直接修改原状态数组违反React状态不可变的规则。
3. 属性名不匹配：目标数组的属性是 displayName，但你的createData函数返回的是name，属性名不一致。

解决方案 #

1. 定义数组元素类型

先明确数组中每个元素的类型，用type或interface声明：

type DisplayItem = {
  id: number;
  displayName: string;
};

2. 正确初始化状态

初始化useState时指定类型，让TypeScript知道状态是DisplayItem类型的数组：

const [display, setDisplay] = useState<DisplayItem[]>([]);

3. 修改状态的正确方式

通过创建新数组的方式更新状态，避免直接修改原数组：

• 使用展开运算符（推荐）：

const newItem = { id: 1, displayName: "Abc1" };
setDisplay([...display, newItem]);

• 或者修复createData函数，确保属性名匹配：

function createData(id: number, displayName: string): DisplayItem {
  return { id, displayName };
}

// 更新状态
setDisplay([...display, createData(1, "Abc1")]);

完整示例代码 #

import { useState } from 'react';

type DisplayItem = {
  id: number;
  displayName: string;
};

function YourComponent() {
  const [display, setDisplay] = useState<DisplayItem[]>([]);

  function createData(id: number, displayName: string): DisplayItem {
    return { id, displayName };
  }

  // 添加元素的示例函数
  const addItem = () => {
    const newId = display.length + 1;
    setDisplay([...display, createData(newId, `Abc${newId}`)]);
  };

  return (
    <div>
      <button onClick={addItem}>添加元素</button>
      {display.map(item => (
        <div key={item.id}>{item.displayName}</div>
      ))}
    </div>
  );
}

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