Javascript 反应下拉菜单-如果调用setState，则显示不会更改

我有一张表格。我正在使用react下拉列表依赖项。我有一个很奇怪的问题。有一个onChange道具传递给下拉组件。当is返回时，它会将下拉菜单中的值发送回父组件（在我的示例中为表单）

人们可能认为您可以通过

this.setState（）

获取该响应并将其值设置为状态

除非我使用

setState（）

，否则选择菜单的显示值将以任何方式停止更改。它显示我的

选择您的业务

文本，而不是所选的值。如果我删除

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

从“React”导入React；
从“反应下拉列表”导入下拉列表
从“../FormInput/FormInput”导入FormInput；
从“../FormCheckbox/FormCheckbox”导入FormCheckbox；
导入“./RegistrationForm.css”
导入“反应下拉列表/style.css”
导出默认类注册表单扩展React.Component{
建造师（道具）{
超级（道具）；
this.state={
错误\u业务\u名称：false，
错误\u业务\u电子邮件：错误，
错误\u用户名：false，
错误\u密码：false，
错误类型：false，
错误\u术语：false，
错误\u策略：false，
电子邮件：空，
业务名称：空，
用户名：null，
密码：null，
网站：空，
术语：假
}
}
handleSelect（e）{
console.log（e.value）
this.setState（{type:e.value}）
}
render（）{
返回(
此.handleSubmit（e）}>
业务类型
this.setState（{type:e.value}）}
onChange={e=>this.handleSelect（e）}
占位符=“选择您的企业”id=“类型”
/>
请选择有效的业务类型
登记
)
}
}

更改时调用

handleSelect（）

。如果我从该方法中删除

this.setState（{type:e.value}）

，显示就会改变。但是如果我把它放进去，我仍然可以得到值，但是显示不会改变默认的

选择您的业务

文本。该值设置为状态，但用户似乎未选择该值

我不知道这两个过程是如何联系在一起的。在我看来，一旦内容发送到

handleSelect（）

，下拉列表的工作就结束了。但显然，

setState（）

部分正在影响下拉列表

---

救命啊

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

---

因此，与其传递一个字符串数组，不如传递一个对象数组，将整个选定对象设置为状态，并在下拉列表中将选定状态指定给值。

我真的很想理解你刚才说的话，但我有点费劲。我对这种依赖性还不熟悉。我不明白传递下来的东西如何影响值被传递回来时发生的事情。我尝试传递对象，但它没有改变任何事情。同样的问题，当我试图设置state时，实际上您在react下拉组件中传递了一个字符串数组作为选项，而不是它，您需要传递[{label:“Law Office”，value:“Law_Office”}，…]一个类似于它的对象数组，因为我使用了react下拉组件，它需要这种模式作为选项，当选择被更改时，它会提供所选对象作为回报，因此如果您将下拉返回的所选对象指定为状态，并将该状态与具有value属性的下拉组件绑定（value=selected state）然后它将选择值。