TypeScript中从Subjects对象数组提取单个对象传React组件报错如何解决

问题解决方法 #

错误根因

报错的核心是两个低级错误：

• 你用filter方法筛选数组，返回的是Subjects[]类型的数组，但subjectInfo状态定义的是单个Subjects对象/null，类型完全不匹配
• 声明subjectInfo状态时笔误，把接口名Subjects写成了不存在的Subject

具体修改步骤

1. 修正状态类型定义
   找到Main组件里的subjectInfo状态声明，修改为：

const [subjectInfo, setSubjectInfo] = useState<Subjects | null>(null);

2. 替换筛选方法，适配单个对象返回值
   把useEffect里的filter替换为find，find会直接返回第一个符合条件的单个对象，找不到就返回undefined，刚好匹配你的需求：

useEffect(() => {
  if (!currentPeriod) {
    setSubjectInfo(null);
    return;
  }
  const matchItem = allData.find(item => item.subject === currentPeriod);
  setSubjectInfo(matchItem ?? null);
}, [currentPeriod]);

3. （可选优化）完善子组件类型
   你已经给DisplayInfo定义了Props接口，就不要用any浪费TS的类型校验能力，修改组件声明：

export const DisplayInfo: React.FC<Props> = ({ subjectsInfo }) => {
  // 原有渲染逻辑保持不变
}

修改完以上内容后报错就会完全消失。

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