Сбросить реагировать-выбрать выпадающий, когда новые реквизиты прошли в - PullRequest
Новая
       4

Сбросить реагировать-выбрать выпадающий, когда новые реквизиты прошли в

0 голосов
/ 17 марта 2020

Я хотел бы очистить значение в выпадающем списке при получении новых реквизитов. В настоящее время предыдущее значение остается видимым, даже если я раскрываю раскрывающийся список, я вижу новые значения. 

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

class KeydateDropdown extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            optionList: []
        };
    };

    componentDidUpdate(prevProps) {
        let vesselname = this.props.vesselname;
        if (prevProps.vesselname !== vesselname) {
            let keydateList = [];
            this.setState({
                optionList: keydateList
            });
            axios.get('list-keydates', {
                params: {
                    vesselname: vesselname
                }
            })
                .then((response) => {
                    let data = response.data['intervention'];
                    data.forEach((element) => {
                        keydateList.push({ value: element, label: element });
                    });
                    this.setState({ optionList: keydateList });
                })
        }
    }


    render() {

        return (
            <Select
                isDisabled={this.props.isDisabled}
                onChange={this.props.handleKeydateChange}
                options={this.state.optionList}
                className={styles.dropdown}
            />
        );
    }

}

export default KeydateDropdown;

Я подтвердил, что первое setState() внутри componentDidUpdate, которое очищает optionList, вызывает render()

Редактировать: вот код и

1 Ответ

0 голосов
/ 19 марта 2020

Вы забыли явно установить значение для компонента Select. Вы должны передать this.state.selectedKeydate в KeydateDropdown в MainInputBar и затем передать это значение компоненту Select:

В MainInputBar.jsx: 

      keydateDropdown = (
        <KeydateDropdown
          vesselname={this.state.selectedVessel.value}
          selectedKeydate={this.state.selectedKeydate}
          handleKeydateChange={this.handleKeydateChange}
          value={this.state.selectedKeydate}
        />
      );

В KeyStateDropdown.jsx: 

      <Select
        isDisabled={this.props.isDisabled}
        onChange={this.props.handleKeydateChange}
        options={this.state.optionList}
        className={styles.dropdown}
        value={this.props.value}
      />

Я раздвоил вашу песочницу и исправил ее здесь: https://codesandbox.io/s/happy-einstein-55klv

...