React-select和axios问题

Question

这可能与我不理解(非常奇怪的) JavaScript的工作原理有关，但我真的不明白为什么会这样。我有这段React/React-select代码，几乎一字不差地来自react-select自述文件：

  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}
            />
        );
    }}

这不会填充我的react-select列表:但是，将列表/数组初始化移动到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}
            />
        );
    }}

Answer 1

正确的方法是在React组件的状态中初始化statusOptions属性，然后将其填充到Axios调用快乐路径中，以便setState方法触发填充select组件的重新呈现。

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}
      />
    );
  }
}