React中如何将不同下拉选择器的change值分别传入API对应参数

修正方案 #

你代码的核心问题是每次触发下拉框变更事件时，只拿到了当前操作的下拉框值，并且将同一个值同时赋值给了两个URL参数，同时存储选中值的变量错误使用了数组类型。以下是修改后的完整代码：

import React from 'react';
import Select from 'react-select';

const Selects = [
    {
        name: 'firstSelect',
        options: [
            { value: 1, label: 'Vg' },
            { value: 2, label: 'sri' }
        ]
    },
    {
        name: 'secondSelect',
        options: [
            { value: 1, label: 'akila' },
            { value: 2, label: 'selvi' },
            { value: 3, label: 'shanmuga' }
        ]
    }
];

export default class Demo extends React.Component {
    // 新增初始化state，存储两个下拉框的选中值
    constructor(props) {
        super(props);
        this.state = {
            firstSelect: null,
            secondSelect: null
        }
    }

    onSelectChange(name, value) {
        // 修正：存储键值对用普通对象，不要用数组
        let obj = {};
        obj[name] = value;
        this.setState(obj, () => {
            // setState是异步的，要在回调里拿最新的state值
            const { firstSelect, secondSelect } = this.state;
            
            // 可根据需求调整判断逻辑，比如允许只传其中一个参数
            if (!firstSelect || !secondSelect) return;

            let url =
                'http://localhost:99999/api/GetProfile/Get_MyPostDetails?id=3&Year=' +
                firstSelect.value +
                '&CategoryID=' +
                secondSelect.value;

            let user = JSON.parse(localStorage.getItem('user'));
            const accessToken = user;
            console.log(accessToken);
            fetch(url, {
                method: 'GET',
                headers: {
                    'Content-type': 'application/json',
                    Accept: 'application/json',
                    Authorization: 'Bearer ' + accessToken,
                    'Access-Control-Allow-Headers': 'Access-Control-Request-Headers '
                }
            })
            .then(response => response.json())
            .then(data => {
                this.setState({
                    like: data
                });
                console.log('Filter', data);
            });
        });
    }

    render() {
        return (
            <div>
                {Selects.map((select, i) => {
                    return (
                        <Select
                            key={i}
                            name={select.name}
                            options={select.options}
                            value={this.state[select.name]}
                            onChange={this.onSelectChange.bind(this, select.name)}
                        />
                    );
                })}
            </div>
        );
    }
}

核心修改点 #

• 新增构造函数初始化state，分别存储两个下拉框的选中值
• 将存储选中值的变量从数组[]修正为普通对象{}
• 由于setState是异步方法，将请求逻辑放到setState的回调函数中，保证能拿到最新的选中值
• 拼接URL时，第一个下拉框firstSelect的值对应传给Year参数，第二个下拉框secondSelect的值对应传给CategoryID参数
• 新增参数非空判断，避免未完成选择时发送无效请求，可根据业务需求调整判断规则
• 给Select组件补充value属性，实现选中值的回显

内容的提问来源于stack exchange，提问作者Akilagopal