React useState数组覆盖而非追加及类型错误问题求助

错误原因 #

当你用useState([])初始化数组状态时，TypeScript无法推断数组元素的类型，会默认将其推断为never[]。当你尝试给这个状态赋值其他类型的数组时，就会出现Type '{ customersWithTrade: CustomerTradeDto | undefined; }[]' is not assignable to type 'never'的类型不兼容错误。

解决步骤 #

1. 显式指定useState的数组元素类型 #

在声明useState时，通过泛型参数明确数组要存储的元素类型（可以是你的MyCustomObject，或者对应的数据结构类型）：

// 先定义对应的类型（如果还没定义的话）
type CustomerItem = {
  customersWithTrade: CustomerTradeDto | undefined;
};

// 显式指定useState的泛型类型
const [customers, setCustomers] = useState<CustomerItem[]>([]);

2. 覆盖数组而非追加元素 #

在useEffect中创建新数组后，直接将新数组传入setState函数即可覆盖原数组，不需要使用扩展运算符追加元素：

useEffect(() => {
  // 模拟获取或创建新的对象数组
  const newCustomerData: CustomerTradeDto | undefined = fetchCustomerTradeData(); // 替换为你的实际数据逻辑
  const newCustomersArray: CustomerItem[] = [{ customersWithTrade: newCustomerData }];
  
  // 直接传入新数组实现覆盖
  setCustomers(newCustomersArray);
}, []);

完整示例代码 #

import { useState, useEffect } from 'react';

// 假设你的CustomerTradeDto类型定义
type CustomerTradeDto = {
  id: number;
  tradeInfo: string;
};

type CustomerItem = {
  customersWithTrade: CustomerTradeDto | undefined;
};

const MyComponent = () => {
  const [customers, setCustomers] = useState<CustomerItem[]>([]);

  useEffect(() => {
    // 模拟异步获取数据
    const fetchData = async () => {
      try {
        const response = await fetch('/api/customer-trade');
        const data: CustomerTradeDto = await response.json();
        // 创建新数组
        const newCustomers = [{ customersWithTrade: data }];
        // 覆盖原数组
        setCustomers(newCustomers);
      } catch (error) {
        // 处理错误，比如设置undefined
        setCustomers([{ customersWithTrade: undefined }]);
      }
    };

    fetchData();
  }, []);

  return (
    <div>
      {customers.map((item, index) => (
        <div key={index}>
          {item.customersWithTrade ? (
            <p>Trade ID: {item.customersWithTrade.id}</p>
          ) : (
            <p>No trade data available</p>
          )}
        </div>
      ))}
    </div>
  );
};

export default MyComponent;

内容的提问来源于stack exchange，提问作者Sami.C