Установка значения по умолчанию в раскрывающемся списке выбора реакции, который заполняется из вызова API

Question

class Select extends React.PureComponent {
    constructor(props) {
        super(props)
        this.state = { value: this.props.defaultValue }
        this.handleChange = this.handleChange.bind(this)
    }

    handleChange(e) {
        e.persist()
        if (typeof this.props.onDataChange !== 'undefined') {
            this.setState({ value: e.target.value }, () => this.props.onDataChange(e))
        } else {
            this.setState({ value: e.target.value })
        }
    }

    render() {
        const { options } = this.props
        return (
            <div>
                <select
                    value={this.state.value}
                    onChange={this.handleChange}
                >
                    {options.map((option, i) => {
                        const value = option.value || option.path || null
                        const label = option.label || option.name || option

                        return (
                            <option key={`option-${i}`} value={value}>
                                {label}
                            </option>
                        )
                    })}
                </select>
            </div>
        )
    }
}

class Display extends React.PureComponent {
    constructor(props) {
        super(props)
    }

    async getSomeValues() {
        try {
            this.setState({ isReady: false })
            await Axios.get(`some-values`)
                .then(async (result) => {
                    this.setState({
                        values: result.data.values,
                        default: result.data.default
                    })
                })
        } catch (error) {
            console.log(error)
        } finally {
            this.setState({ isReady: true })
        }
    }

    componentDidMount() {
        this.getSomeValues()
    }

    render() {
        return (
            <Select 
                options={this.state.values} 
                defaultValue = {this.state.defaultValue} 
            />
        )
    }
}

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

Мой родитель звонит в службу API и возвращает список элементов, которые должны отображаться в раскрывающемся списке выбора. Мой API возвращает набор параметров, которые будут отображаться, и начальное значение, которое будет выбрано при загрузке.

Первоначальный рендеринг принимает свойство defaultValue и задает состояние, которое будет отображаться в начальном экземпляре в конструкторе компонента выбора,проблема, с которой я столкнулся, заключается в том, что вызов api выполняется после первоначального рендеринга, поэтому значение по умолчанию всегда выходит равным нулю.

Мне нужен механизм для установки значения выпадающего списка на начальное значение при загрузке, но это должно быть сделано в результате вызова API, который происходит после загрузки компонента?

Каков самый чистый способ установить значение состояния на то, что возвращается из API при начальной загрузке?

Я уверен, что эту проблему легко решить, но я застреваю между тем, что я хочу сделать, и шаблонами загрузки / рендеринга в реакции.

Буду признателен за любую помощь.

Answer 1

Я вижу две опции:

Опция 1

Вы можете запретить рендеринг компонента Select, пока запрос не будет завершен. Это будет означать, что ваш конструктор сработает после того, как у вас есть данные, и будет правильно инициализирован.

render() {
  if (this.state.defaultValue) {
    return (
      <Select 
        options={this.state.values} 
        defaultValue={this.state.defaultValue} 
      />
    )
  } else {
    return null; // or loading graphic
  }
}

Опция 2

В вашем компоненте Select используйтеметод жизненного цикла, например componentDidUpdate, чтобы проверить, изменилась ли пропеллер defaultValue с последнего рендера. Если это так, установите значение по умолчанию в состоянии. Это позволит установить defaultValue только один раз.

componentDidUpdate(prevProps) {
  if (this.props.defaultValue !== prevProps.defaultValue) {
    this.setState({ defaultValue: this.props.defaultValue });
  }
}