reactjs - React nobelprizes API：如何打印一年的所有获奖者？

Question

我正在使用 nobelprizes.org 中的一个 api 来检索一些数据。

一些年度奖项被授予多个获奖者。

在 React 中，我可以将年份的状态与一个名称的状态匹配，但不能将以下名称匹配，因此我无法检索其他名称。

这是端点：

{
"laureates": [
{
"id": "745",
"knownName": {},
"givenName": {
"en": "A. Michael",
"se": "A. Michael"
},
"familyName": {
"en": "Spence",
"se": "Spence"
},
"fullName": {
"en": "A. Michael Spence",
"se": "A. Michael Spence"
},
"gender": "male",
"birth": {},
"links": {
"rel": "laureate",
"href": "http://masterdataapi.nobelprize.org/2/laureate/745",
"action": "Get",
"types": "application/json"
},
"nobelPrizes": [
{
"awardYear": "2001",
"category": {
"en": "Economic Sciences",
"no": "Økonomi",
"se": "Ekonomi"
},

这是我的反应代码：

class Cards extends Component {
    state = {
        allCards: [],
        searchYear: '',
        searchName: ''
    }

    //Search laureates axios api
    searchAll = async (searchYear, searchName) => {

        await axios.get(`http://api.nobelprize.org/2.0/laureates?name=${searchName}&nobelPrizeYear=${searchYear}&nobelPrizeCategory=${category}`)
            .then(res => { //both values are retrieved in the console but not in the render() method
                const nameMatch = res.data.laureates[0]?.knownName?.en 
                const yearMatch = res.data.laureates[0]?.nobelPrizes[0]?.awardYear

                this.setState({
                    allCards: res.data.laureates,
                    searchName:  nameMatch,
                    searchYear: yearMatch
                })
            })
            .catch(err => console.log(err))
    };

    render() {
        let filterCards = this.state.allCards.filter(card => {
            return ( //the return method doesn't return the values 
                     //associated with the state values 
 card.laureates ?
         card.laureates[0]?.knownName?.en.includes(searchName) ||
         card.laureates[1]?.knownName?.en.includes(searchName)
                    : null
            )
        })
            .map((card) => {
                return <WinnerCard
                    key={card.id}
                    name={card.laureates[0]?.knownName?.en}
                    name1={card.laureates[1]?.knownName?.en}
                />
            });

        return (
                <div>
                  <SearchBar searchAll={this.searchAll} />
                </div>
                <div>
                    {filterCards}
                </div>
            </div >
        )
    }
}

export default Cards;

我可以展示一张有名字但不能有多个名字的卡片，我不知道如何展示同一年获得相同奖项的多个获奖者。

如何检索所有名称？

谢谢您的帮助！！

标签： reactjs