reactjs - 如何使用带有 2 个输入的搜索栏通过 React 调用 API？

Question

我正在使用来自nobelprizes.com的 2 个 API 完成一个应用程序：

https://api.nobelprize.org/2.0/laureates和 https://api.nobelprize.org/2.0/nobelPrizes

我构建了一个搜索栏，其中有 2 个输入过滤 2 个 API，一个用于年份，一个用于名称，因为两个 API 检索不同的信息。

现在，我遇到了数据重叠的问题。

避免数据混合的最佳方法是什么？最好为两个 API 构建一个函数还是在 render 的 return 中使用运算符？

这是代码：

import React, { Component } from 'react';
import axios from 'axios';
import SearchBar from '../../components/SearchBar/SearchBar';

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

    searchByYear = async (searchYear) => {
        let category = this.props.match.params.category_name;
        await axios.get('http://api.nobelprize.org/2.0/nobelPrizes?limit=200&sort=desc&nobelPrizeYear=' + searchYear + '&nobelPrizeCategory=' + category + '&format=json&csvLang=en')
            .then(res => {
                const data = res.data.nobelPrizes;
                const yearMatch = res.data.nobelPrizes[0]?.awardYear
                this.setState({
                    allCards: data,
                    searchYear: yearMatch
                })
            })
            .catch(err => console.log(err))
    };

    searchByName = async (searchName, searchYear) => {
        let category = this.props.match.params.category_name;
        await axios.get('http://api.nobelprize.org/2.0/laureates?name=' + searchName + '&nobelPrizeYear=' + searchYear + '&nobelPrizeCategory' + category)
            .then(res => {
                const data = res.data.laureates;
                const nameMatch = res.data.laureates[0]?.knownName
                this.setState({
                    allCards: data,
                    searchName: nameMatch
                })
            })
            .catch(err => console.log(err))
    };

     render() {
        const { searchYear, searchName, allCards } = this.state;

        let filterCards = allCards.filter(card => {

            return (
                card.awardYear && card.laureate ?
                    card.laureates[0]?.knownName?.en.toLowerCase().includes(searchName.toLowerCase()) ||
                    card.laureates[1]?.knownName?.en.toLowerCase().includes(searchName.toLowerCase()) ||
                    card.laureates[2]?.knownName?.en.toLowerCase().includes(searchName.toLowerCase())

                    : null
            )
        })

        let cards = filterCards.map((card) => {
            return <WinnerCard
                key={card.id}
                awardYear={card.awardYear}
                category={card.category.en}
                name={card.laureates[0]?.knownName?.en}
                name1={card.laureates[1]?.knownName?.en}
                name2={card.laureates[2]?.knownName?.en}
                motivation={card.laureates[0].motivation?.en}
            />
        });

        return (
            <div>
                <div>
                    <SearchBar
                        // searchBy={this.searchBy}
                        searchByYear={this.searchByYear}
                        searchByName={this.searchByName}
                        clearResults={this.clearResults}
                        showReset={allCards.length > 0 ? true : false} />
                </div>
                <div>
                    {cards}
                </div>
            </div>
        )
    }
}

export default Cards;

欢迎任何帮助，谢谢！

标签： reactjs