React+TypeScript状态数组更新报错，求数组追加解决方案

问题根源 #

你遇到的TypeScript错误，本质是父组件定义的handleValue函数参数类型不支持React状态的函数式更新写法：你传入的是一个接收当前数组状态并返回新数组的函数，但handleValue只接受string[]类型的参数，导致类型不匹配。

具体解决步骤 #

1. 修正父组件的状态更新函数类型 #

父组件里的handleValue需要同时支持两种传参方式：直接传入新数组，或者传入生成新数组的函数（对应React的setState函数式更新）。

示例父组件代码：

import { useState } from 'react';

const ChooseValuesScreen = () => {
  // 明确指定状态为string数组类型，避免隐式any
  const [selectedValues, setSelectedValues] = useState<string[]>([]);

  // 修正handleValue的参数类型：支持string[]或函数式更新
  const handleValue = (update: string[] | ((prev: string[]) => string[])) => {
    setSelectedValues(update);
  };

  return (
    <div>
      {/* 假设item是包含value:string的对象 */}
      <CustomButton handleValue={handleValue} item={{ value: 'test', label: 'Test' }} />
    </div>
  );
};

2. 同步修正子组件的Props类型 #

子组件CustomButton的Props中，handleValue的类型要和父组件保持一致，不能只限定为接收string[]：

// 定义子组件的Props类型
type CustomButtonProps = {
  handleValue: (update: string[] | ((prev: string[]) => string[])) => void;
  item: { value: string; label: string };
};

const CustomButton = ({ handleValue, item }: CustomButtonProps) => {
  return (
    <button 
      onClick={() => {
        // 用函数式更新追加元素，此时TS不会报错
        handleValue(prev => [...prev, item.value]);
      }}
    >
      {item.label}
    </button>
  );
};

3. 消除隐式any类型 #

错误信息里的any是因为未给状态或函数参数指定明确类型，确保：

• 父组件的selectedValues状态明确为string[]
• 函数式更新中的prev参数明确为string[]（上述代码已实现）

为什么直接传item.value会替换原有值？ #

你之前传handleValue(item.value)不报错但会覆盖数组，是因为当时handleValue的参数类型被定义为string，内部直接把item.value包装成新数组赋值（比如setSelectedValues([item.value])），每次都会创建仅包含当前item的新数组，自然覆盖原有值。

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