TypeScript：如何在数组中找到一个对象并 return 该特定对象？

Question

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

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

TypeScript error in /Users/.../api/VaccineDataApi.tsx(64,14): Object is possibly 'undefined'. 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>;

TypeScript：如何在数组中找到一个对象并 return 该特定对象？

TypeScript: how to find an object in an array and return that specific object?

object

find

typescript

reactjs