React TypeScript中如何同时传递useState setter与对象给子组件？

问题场景 #

在React TypeScript开发中，需要将useState的setter函数和数组中的单个对象同时传递给子组件。最初尝试用展开运算符{...item}传递对象，同时附加setMyState，但遇到了类型不匹配的错误。

最初的错误代码 #

// 父组件部分
<div>
  {array && array.map((item) => {
     return (
       <div key={item.id}>
          <Component {...item} setMyState={setMyState}/>
       </div>
     );
   })}
</div>

// 子组件部分
import { Item } from './some-file';

interface IProps {
  item: Item;
  setMyState: ()=> void;
}
function Component(props:IProps) {
  // 组件逻辑
  return <div></div>;
}

触发的错误信息 #

"(property) IProps.setMyState: () => void Type 'Dispatch<SetStateAction<Item[]>>' is not assignable to type '() => void'"

错误原因 #

1. 类型定义不匹配：useState生成的setter函数类型是Dispatch<SetStateAction<T>>（这里T是Item[]），而子组件Props里定义的() => void完全不符合这个类型，导致类型校验失败。
2. Props传递方式错误：用{...item}展开对象时，是把item的所有属性平铺传递给子组件，但子组件Props里定义的是接收一个item字段，所以子组件根本无法正确拿到完整的Item对象。

修正后的正确代码 #

// 父组件部分
<div>
 {array && array.map((item) => {
    return (
      <div key={item.id}>
         <Component item={item} setMyState={setMyState}/>
      </div>
    );
  })}
</div>

// 子组件部分
import { Dispatch, SetStateAction } from 'react';
import { Item } from './some-file';

interface IProps {
 item: Item;
 // 更准确的类型是Dispatch<SetStateAction<Item[]>>，支持直接传值或回调函数
 setMyState: Dispatch<SetStateAction<Item[]>>;
}
function Component(props:IProps) {
  // 组件逻辑
  return <div></div>;
}

关键修改点 #

• 传递Props时明确使用item={item}，确保子组件能接收到完整的Item对象，而不是平铺的属性。
• 修正setMyState的类型定义：使用Dispatch<SetStateAction<Item[]>>，这是React内置的类型，完全匹配useState setter的实际类型（既支持直接传入Item[]，也支持传入(prevState) => newState的回调函数）。如果只需要直接传值，Dispatch<Item[]>也能工作，但前者覆盖场景更全面。

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