javascript - react-dropdown - 如果调用 setState，显示不会改变

Question

我有一个 React 表单。我正在使用 react-dropdown 依赖项。我有一个非常奇怪的问题。有一个 onChange Prop 传递给下拉组件。返回时，它将下拉菜单中的值发送回父组件(在我的例子中是表单)。

有人会认为您可以获取该响应并通过 this.setState() 将其值设置为状态。

除非我使用 setState()，否则选择菜单的显示值会停止更改。它显示我的 Select your Business 文本而不是所选值。如果我删除 setState()，它就会改变。

什么……？

这是该组件的精简版:

import React from 'react';
import Dropdown from 'react-dropdown'
import FormInput from '../FormInput/FormInput'; 
import FormCheckbox from '../FormCheckbox/FormCheckbox'; 
import './RegistrationForm.css'
import 'react-dropdown/style.css'

export default class RegistrationForm extends React.Component {
    constructor(props) {
        super(props); 
        this.state={ 
            error_business_name: false,
            error_business_email: false,
            error_username: false, 
            error_password: false, 
            error_type: false, 
            error_terms: false, 
            error_policy: false, 
            email: null,
            business_name: null, 
            username: null, 
            password: null, 
            website: null, 
            terms: false 
        }
    }



    handleSelect(e) {
        console.log(e.value)
        this.setState({ type: e.value })
    }

    render() {

        return (
            <main role="main" className="RegistrationForm">
                <img alt="Simplr Logo" src={require("../../images/logo.png")} />
                <form onSubmit={e => this.handleSubmit(e)}>

                    <section className={this.state.error_type ? "error" : ""}>
                        <label htmlFor="type">Type of Business</label> 
                        <Dropdown 
                            className={this.state.error_type ? "dropdown error-dropdown" : "dropdown"} 
                            options={["Law Office", "Accounting Firm", "Construction"]} 
                            // onChange={e => this.setState({ type: e.value })} 
                            onChange={e => this.handleSelect(e)} 
                            placeholder="Select your Business" id="type"
                        />
                        <p className="error-message">Please select a valid business type</p>
                    </section>

                    <button>REGISTER</button>
                </form>
            </main>
        )
    }
}

handleSelect() 在更改时被调用。如果我从该方法中删除 this.setState({ type: e.value })，显示会发生变化。但是如果我把它放进去，我仍然可以获得该值，但是显示不会从默认的 Select your Business 文本改变。该值被设置为状态，但它似乎没有被用户选中。

我什至不知道这两个过程是如何联系在一起的。在我看来，一旦事情被发送到 handleSelect()，下拉列表的工作就结束了。但显然，setState() 部分正在影响下拉列表。

帮助!

Answer 1

React 下拉组件需要一个对象数组作为选项 [{label : "", value : ""}]

因此，不是传递字符串数组，而是传递对象数组，并将整个选定对象设置为状态，并将选定状态分配给下拉列表中的值。