在从 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 属性是否与上次渲染相比发生了变化。如果是这样，请在 state 中设置默认值。这将使defaultValue 只设置一次。

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