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

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 return一个数组而不是单个项目。

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

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

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

但是Array.findreturn一个项目| undefined 所以您需要将 useState 类型更改为：

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

Answer 2

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

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

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