从打字稿中的对象数组中提取对象

Question

我有一组接口Subjects 的对象。我只想要该数组中的一个对象，并将其作为道具传递给组件以呈现该数据。 “我是 Typescript 的新手”。

export interface Subjects {
  id: number;
  subject: string;
  subjectName: string;
  periods: number[];
  faculty: string;
  slot: string;
  code: string;
  googleClassRoomLink?: string;
  googleMeetLink?: string;
}

export const Main: React.FC = () => {
  const [allData, setAllData] = useState<Subjects[]>(s4);
  const [currentPeriod, setCurrentPeriod] = useState<string | null>(null);
  const [subjectInfo, setSubjectInfo] = useState<Subject | null>(null);

  useEffect(() => {
    const data = allData.filter((item) => item.subject === currentPeriod);
    setSubjectInfo(data);
  }, [currentPeriod]);

  return (
    <div className="Main">
      <Table subjects={allData} setCurrentPeriod={setCurrentPeriod} />
      {currentPeriod && subjectInfo && (
        <DisplayInfo subjectsInfo={subjectInfo} />
      )}
    </div>
  );
};

这是第二个组件

import { Subjects } from './Main';
interface Props {
  subjectsInfo: Subjects;
}

export const DisplayInfo: React.FC<any> = ({ subjectsInfo }) => {
  console.log(subjectsInfo);

  return (
    <div className="DisplayInfo">
        <div>
          <h3>{subjectsInfo.subjectName}</h3>
          <h4>{subjectsInfo.subject}</h4>
          <h4>{subjectsInfo.faculty}</h4>
          <h4>{subjectsInfo.slot}</h4>
          <h4>{subjectsInfo.code}</h4>

          <button>ClassRoom</button>
          <button>Meet</button>
        </div>
    </div>
  );
};

现在打字稿说我做不到 Argument of type 'Subjects[]' is not assignable to parameter of type 'SetStateAction<Subjects | null>'. Type 'Subjects[]' is not assignable to type '(prevState: Subjects | null) => Subjects | null'. Type 'Subjects[]' provides no match for the signature '(prevState: Subjects | null): Subjects | null'.

Answer 1

您的allData 是对象Subjects[] 的数组，在您对其应用过滤器allData.filter 后，您的data 仍然是一个数组

因为Array.filter 返回一个数组而不是单个项目。

因此，当您将 data 设置回 setSubjectInfo(data) 时，它的类型与 Subject | null 类型不匹配。

如果您只想获得数组中找到的第一个项目，请尝试使用Array.find：

const data = allData.find((item) => item.subject === currentPeriod);
setSubjectInfo(data);

但是Array.find 退货 | undefined 所以您需要将您的 useState 类型更改为：

const [subjectInfo, setSubjectInfo] = useState<Subject | undefined>();

Answer 2

您的整个代码是正确的。您需要修改的唯一部分是过滤器部分。当您根据条件过滤数组 [] 时，它会返回一个数组。因此，如果您确定每个主题都是唯一的，则返回过滤数组的第 0 个索引，该索引将是主题类型。

这样数据的类型将是 Subjects |您所在州指定的 null。

    const data = allData.filter((item) => item.subject === currentPeriod)[0];