React-select и выпуск axios - PullRequest
Новая
       14

React-select и выпуск axios

0 голосов
/ 05 мая 2019

Возможно, это связано с тем, что я не понимаю, как (очень странно) работает JavaScript, но я действительно не понимаю, почему это так. У меня есть этот кусок кода React / React-select, почти дословно из readme реагирования-выбора: 

  class Status extends Component {
    constructor(props) {
        super(props)
        this.state = {
          selectedOption: null,
        }
        this.statusOptions = [];
    }
    handleChange = (selectedOption) => {
        this.setState({ selectedOption });
        console.log(`Option selected:`, selectedOption);
    }
    componentDidMount = () => {
        console.log(this.statusOptions);
            axios.get(host+'/StatusList')
                .then((response) => {
                    for(var i = 0; i < response.data.status_list.length; i++) {
                        this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
                    }
                })
                .catch((error) =>{
                    console.log(error)
                })
                .then(() =>{

                });

    }
    render() {
        const { selectedOption } = this.state;

        return (
            <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={this.statusOptions}
            />
        );
    }}

Это не заполняет мой список реакции-выбора: однако, перемещение инициализации списка / массива в componentDidMount заставляет его работать. Почему ?? 

  class Status extends Component {
    constructor(props) {
        super(props)
        this.state = {
          selectedOption: null,
        }
    }
    handleChange = (selectedOption) => {
        this.setState({ selectedOption });
        console.log(`Option selected:`, selectedOption);
    }
    componentDidMount = () => {
        this.statusOptions = [];
        console.log(this.statusOptions);
            axios.get(host+'/StatusList')
                .then((response) => {
                    for(var i = 0; i < response.data.status_list.length; i++) {
                        this.statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
                    }
                })
                .catch((error) =>{
                    console.log(error)
                })
                .then(() =>{

                });

    }
    render() {
        const { selectedOption } = this.state;

        return (
            <Select
                value={selectedOption}
                onChange={this.handleChange}
                options={this.statusOptions}
            />
        );
    }}

1 Ответ

1 голос
/ 05 мая 2019

Правильный способ сделать это - инициализировать свойство statusOptions в состоянии компонента React, а затем заполнить его по счастливому пути вызова Axios, чтобы метод setState вызвал повторную визуализацию, заполнив выберите компонент. 

class Status extends Component {
  constructor(props) {
    super(props)
    this.state = {
      selectedOption: null,
      statusOptions: []
    }
  }

  handleChange = (selectedOption) => {
    this.setState({ selectedOption });
    console.log(`Option selected:`, selectedOption);
  }

  componentDidMount = () => {
    axios.get(host+'/StatusList')
      .then((response) => {
        const statusOptions = []

        for(var i = 0; i < response.data.status_list.length; i++) {
          statusOptions.push({value: response.data.status_list[i][0], label: response.data.status_list[i][1]});
        }
        this.setState({ statusOptions })
      })
      .catch((error) =>{
        console.log(error)
      })
  }

  render() {
    const { selectedOption, statusOptions } = this.state;

    return (
      <Select
        value={selectedOption}
        onChange={this.handleChange}
        options={statusOptions}
      />
    );
  }
}
...