Список опций React select не изменится при изменении массива

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, который вызовет повторную визуализацию компонента. Прямая установка свойства 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 }))
  }

Во-вторых, вы не должны вызывать функцию setState в функции рендеринга. Попробуйте использовать componentDidMount метод