Question

我有setOptions接受一个值，例如一个整数，并将该值用作大小为7的数组的第一个值。

问题是，当另一个元素用新值调用setOptions时，选项列表不会更改/更新。 myOptions确实包含新值，因为我可以将它们打印到控制台。

我期望myOptions更改时，选择选项值也会更改。

import React from 'react';

class MyOption extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      myOptions: []
    }
    this.setOptions = this.setOptions.bind(this);
  }

  setOptions(item) {
    let tempOpt = [];
    for(var i = item; i < 7; i++){
      var opt = "item " + i;
      this.state.tempOpt.push(<option key={i} value={opt}>{opt}</option>);
    }
    this.state.myOptions = tempOpt;
  }

  render() {
    this.setOptions(1);
    return(
      <div>
          <div>
              <select className="form-control" value={this.myValue}
                  onChange={(e) => this.setState({myValue: e.target.value})}>
                 {this.state.myOptions}
              </select>
          </div>
      </div>

    );

  }
}

export default MyOption;

Answer 1

您应该使用state方法来操作this.setState，这将触发Component的重新渲染。直接设置state属性应仅在构造函数中完成。

  setOptions(item) {
    let tempOpt = [];
    for(var i = item; i < 7; i++){
      var opt = "item " + i;
      tempOpt.push(<option key={i} value={opt}>{opt}</option>);
    }
    this.setState(() => ({ myOptions: tempOpt }))
  }

第二，您不应在render函数中调用setState函数。考虑使用componentDidMount方法

数组更改时，反应选择选项列表不会更改

1 个答案: