1

我是 React 新手，无法将使用数组上的 map() 函数创建的 6 个按钮的值连接到来自 API 请求的 6 个类别。

我试图在类组件的状态中定义一个类别，但我不确定如何使按钮的名称动态匹配 API 的类别。

到目前为止，这是我的代码：

import axios from 'axios';
import Card from 'react-bootstrap/Card';
import Button from 'react-bootstrap/Button';
import ButtonCategory from '../ButtonCategory/ButtonCategory';
import CategoriesCard from '../CategoriesCard/CategoriesCard';
import WinnerCard from '../WinnerCard/WinnerCard'
import './ButtonsCategories.css'

export class ButtonsCategories extends Component {
    state = {
        category: []

    }

    handleClick = () => {
        axios.get('http://api.nobelprize.org/2.0/nobelPrizes?limit=2&sort=desc&nobelPrizeCategory=' + this.state.category + '&format=json&csvLang=en')
            .then(res => {
                const categoryData = res.data.nobelPrizes;
                console.log(categoryData)
                // console.log("CATEGORY", categoryData?.category?.en)

                this.setState({
                    category: this.state.category
                })
            }).
            catch(err => console.log(err))
    };

    render() {

        //BUTTONS CATEGORIES
        const allCategoriesButtons = ["Physics", "Chemistry", "Medicine", "Literature", "Peace", "Economics"];

        const allCatMap = allCategoriesButtons.map((button) => {
            return < ButtonCategory
                key={button.toString()}
                value={button}
                name={button}
                // valueOf={this.state.category}
                onClick={this.handleClick}
            />
        })


        return (
            <div className="container">
                <div className="btn-group w-100">
                    {allCatMap}
                </div>
            </div>
        )
    }
}

export default ButtonsCategories;

看起来很简单，但我想不出如何通过将 this.state.category 连接到按钮来更改它。

非常欢迎任何帮助

4

1 回答 1

1

我认为这里的问题是您使用相同的函数来处理不同的按钮，但是 handleClick 函数实际上并不知道按下了哪个按钮。

在 allCatMap 中，更改 onClick 以获取按下的按钮：

onClick={e => this.handleClick(e.target.value)}

然后更新 handleClick 声明（和 api 调用）：

handleClick = (buttonValue) => {
    axios.get('http://api.nobelprize.org/2.0/nobelPrizes?limit=2&sort=desc&nobelPrizeCategory=' + buttonValue + '&format=json&csvLang=en')
于 2020-06-12T18:45:46.600 回答