在从 API 调用填充的反应选择下拉列表中设置默认值

Posted 2023-04-14

【中文标题】在从 API 调用填充的反应选择下拉列表中设置默认值

【英文标题】：Setting a default value on a react select dropdown that is populated from an API call

【发布时间】：2019-11-01 16:35:54

【问题描述】：

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 返回的值的最简洁方法是什么？

我确信这一定是一个容易解决的问题，但我一直在我想做的事情和反应中的加载/渲染模式之间陷入困境。

任何帮助将不胜感激。

【参考方案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 );
  

【讨论】：

选项 2 绘制了一个反应 linting 问题警告不要这样做。不过，选项 1 的延迟渲染对我有用。感谢您的帮助

如果您将 react hook 表单与 react select 一起使用，选项 1 不可行，因为 react hook 表单库需要渲染选择以设置默认值，并且无法使用已设置的默认值渲染 react select (为未定义），因为它们在数据加载后无法再次设置。我通过将默认道具直接发送到选择组件来解决这个问题，以便它可以在第一次渲染时使用它。我不喜欢这个解决方案，因为它将这个选择的默认值与通常的反应钩子表单默认值分开，但我找不到任何其他解决方案。

我找到了一个解决方案，只需从react hook form watch中读取defaultValues，watch在注册输入之前就有react hook form默认值。