React-select 值在第一个 selection 上设置为 null

Question

我正在使用 react-select 构建下拉菜单：https://react-select.com/home

我的下拉选项来自对列表的 API 调用。我遇到的问题是，当你第一次 select 一个选项时，我的 AccountSelected1 说它仍然是 null 当我 select 另一个选项开始存储在我的 AccountSelected1 状态。然而，它最终存储的是之前的 selected 选项。

AccountSelected1: any,

AccountSelected1: null,

handleChangeAccountSelected1 = AccountSelected1 => {
    console.log(AccountSelected1);
    this.setState({ AccountSelected1: AccountSelected1.value}); 
    console.log(`AccountSelected1 set to:`, this.state.AccountSelected1); 
};  

public render(): React.ReactElement<WebappProps> {

    const { AccountSelected1 } =this.state;
        <Select
            value={AccountSelected1}
            onChange={this.handleChangeAccountSelected1} 
            options={this.state.AccountList}
        />
    return (

    )
}

这是我的控制台。如您所见，它第二次开始存储之前的 value

//Console for First selection
{value: "23422", label: "23422", Description: "Account for Jeff"}
GLAccountSelected set to: null

//Console for Second selection
{value: "68755", label: "68755", Description: "Account for Lou"}
GLAccountSelected set to: 23422

Answer 1

如您所述，您没有得到描述。我认为您应该将整个对象设置为状态，您的 handleChangeAccountSelected1 应该如下所示：

handleChangeAccountSelected1 = AccountSelected1 => {
    console.log('AccountSelected1 BEFORE',this.state.AccountSelected1);
    this.setState({ AccountSelected1 },() => {
        console.log('AccountSelected1 AFTER',this.state.AccountSelected1);
    }); 
};

React-select 值在第一个 selection 上设置为 null

React-select value set to null on first selection

javascript

async-await

typescript

reactjs

react-select