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

我正在尝试解决我认为非常简单的问题。我有一个 parent 组件，其中包含一个 child 组件，该组件正在呈现 select 下拉菜单。

我的 parent 调用 API 服务并拉回要在 select 下拉列表中显示的项目列表。我的 API returns 要显示的选项集和要在加载时 select 编辑的初始值。

初始渲染采用默认值属性并设置要在 select 组件构造函数的初始实例中显示的状态，我遇到的问题是 api 调用在初始渲染后完成，因此默认值始终为 null。

我需要一种机制来将 select 下拉列表的值设置为加载时的初始值，但它必须作为 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 });
  }
}

在从 API 调用填充的反应 select 下拉菜单上设置默认值

Setting a default value on a react select dropdown that is populated from an API call

javascript

default

render

drop-down-menu

reactjs