Блог

Мне нужно получить массив значений изменения дескриптора и передать его в URL API. Я поделюсь своим кодом.

 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 {
    onSelectChange(name, value) {
        let obj = [];
        obj[name] = value;
        this.setState(obj);

        console.log(obj[name].value);

        let url =
            'http://localhost:99999/api/GetProfile/Get_MyPostDetails?id=3amp;Year='  
            obj[name].value  
            'amp;CategoryID='  
            obj[name].value;

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

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

Когда я выбираю первое раскрывающееся значение, оно также переходит в идентификатор года и категории. Мне нужно выбрать первое выпадающее значение, которое переходит в год, а второе значение устанавливается в идентификатор категории. Пожалуйста, поделитесь своей идеей.

заранее спасибо.

this.setState является асинхронным

Когда вы используете состояние в URL API в первый раз, ваше состояние еще пусто. Когда вы делаете это во второй раз, у вас есть данные с первого this.setState вызова. Вы должны выполнить вызов API в обратном вызове seState:

 this.setState(
      (prev) => {
        return {
          ...prev,
          [name]: {
            ...prev[name],
            value: value.value
          }
        };
      },
      () => {
        //state will be updated and you can send API call
      }
    );