如何用TypeScript和React填充组件数组？解决类型报错问题

问题根源 #

你遇到的报错是因为初始化state时未显式指定类型，TypeScript默认将空数组推断为never[]，导致后续更新state时，返回的组件元素数组与never[]类型不兼容。

方案一：推荐——存储数据而非组件实例 #

React的最佳实践是在state中存储数据，而非已渲染的组件元素，更符合数据驱动视图的逻辑，也更易维护。示例如下：

假设CarBlock组件接收car对象作为props：

interface Car {
  id: number;
  brand: string;
  model: string;
}

interface CarBlockProps {
  car: Car;
}

const CarBlock = ({ car }: CarBlockProps) => {
  return <div>{car.brand} - {car.model}</div>;
};

父组件中用state存储Car类型数组，渲染时通过map生成组件：

import { useState } from 'react';

const ParentComponent = () => {
  // 显式指定state类型为Car[]
  const [cars, setCars] = useState<Car[]>([]);

  // 示例：添加新车辆数据
  const addCar = () => {
    setCars(prev => [...prev, { id: Date.now(), brand: 'Tesla', model: 'Model 3' }]);
  };

  return (
    <div>
      <button onClick={addCar}>添加车辆</button>
      {cars.map(car => <CarBlock key={car.id} car={car} />)}
    </div>
  );
};

方案二：存储React元素数组（若确实需要） #

如果必须直接存储已创建的React组件元素，可以将state类型指定为React.ReactElement<CarBlockProps>[]，让TypeScript正确推断类型：

import { useState, ReactElement } from 'react';

const ParentComponent = () => {
  // 指定state为CarBlock组件元素的数组
  const [carBlockList, setCarBlockList] = useState<ReactElement<CarBlockProps>[]>([]);

  // 添加新的CarBlock元素到state
  const addCarBlock = () => {
    const newCar: Car = { id: Date.now(), brand: 'Ford', model: 'Mustang' };
    setCarBlockList(prev => [...prev, <CarBlock key={newCar.id} car={newCar} />]);
  };

  return (
    <div>
      <button onClick={addCarBlock}>添加车辆组件</button>
      {carBlockList}
    </div>
  );
};

关键说明 #

• React.ReactElement<T>是TypeScript中React组件元素的通用类型，T对应组件的props类型（比如这里的CarBlockProps），能保证数组元素都是合法的CarBlock实例。
• 无论哪种方式，都要给每个组件元素添加唯一的key属性，避免React渲染警告。

不推荐存储组件元素的原因 #

• 数据与视图耦合：修改组件内容需要直接操作state中的组件实例，远不如修改数据灵活。
• 性能损耗：存储组件元素会占用更多内存，React的diff算法也难以高效处理，存储数据则能更好利用React的优化机制。

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