在從 API 調用填充的反應 select 下拉列表中設置默認值

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

我正在嘗試解決我認為是一個非常簡單的問題。 我有一個父組件，其中包含一個子組件，該子組件正在渲染 select 下拉列表。

我的父母調用 API 服務並拉回要在 select 下拉列表中顯示的項目列表。 我的 API 返回要顯示的選項集和加載時要選擇的初始值。

初始渲染采用 defaultValue 屬性並將 state 設置為在 select 組件構造函數的初始實例中顯示，我遇到的問題是 Z8A5DA52ED126447D359E70C05AZ721A8A 總是在完成初始渲染后調用null。

我需要一種機制來將 select 下拉列表的值設置為加載時的初始值，但由於組件加載后發生的 api 調用，因此必須這樣做？

將 state 值設置為初始加載時從 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是否與上次渲染相比發生了變化。 如果是這樣，請在 state 中設置默認值。 這將使defaultValue只設置一次。

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