TypeScript：如何在数组中查找对象并返回该特定对象？

Question

我正在尝试在数组中查找一个对象并返回该特定对象。我是打字稿的新手，所以我尝试用这种方式解决它，但我不确定它为什么不起作用。

已编辑：我的代码甚至没有被编译！我收到以下错误：

/Users/.../api/VaccineDataApi.tsx(64,14) 中的 TypeScript 错误： 对象可能是“未定义的”。 TS2532

import React, { useEffect, useState } from 'react';
import axios from 'axios';

type VaccineDataState = {
    Date: Date,
    Location: string, //Location is state Abbreviations like 'WA'
    LongName: string,
    Doses_Distributed: number,
}

const VaccineData = () => {
    const [vaccine, SetVaccine] = useState<VaccineDataState[]>([])
    const [errorMessage,SetErrorMessage] = useState(null)

    useEffect(() => {
        axios.get("https://localhost:3000")
        .then((response) => {
            const apiVaccineData = response.data.vaccination_data;
            SetVaccine(apiVaccineData);
        })
        .catch((error) => {
            SetErrorMessage(error.message);
            console.log(errorMessage);
        })
    }, []);

  
    let vaccineData = vaccine.find(state => state.Location === 'WA');

    return(
        <div>
            <p>test</p>
            {vaccineData.Location}
        </div>
    )
    
};

export default VaccineData;

Answer 1

VaccineData 指的是功能组件。您可能想要vaccineData.Location 而不是VaccineData.Location。

编辑：要修复 let vaccineData: VaccineDataState | undefined Object is possibly 'undefined'，您可以：

添加 ! 以告诉 Typescript 编译器 vaccineData 永远不会是 undefined（只有当您确定它实际上永远不会是时）：

let vaccineData = vaccine.find(state => state.Location === 'WA')!;

或

添加一些代码来检查undefined：

    let vaccineData = vaccine.find(state => state.Location === 'WA');
    if(!vaccineData)
        return <p>Data not found!</p>;