Javascript 在选项可以填充之前对正在渲染的选择作出反应

我正在使用这里找到的

react select

：

我的下拉列表当前为空，并且我相信select元素在setState发生之前已被渲染。我在文档中看到他们有

async

组件，但不确定如何转换我的代码来解决这个问题

这是我的密码：

async GetFlavors() {
    let preprocessedData;
    try {
        let getFlavors1 = [
            { value: 'chocolate', label: 'Chocolate' },
            { value: 'strawberry', label: 'Strawberry' },
            { value: 'vanilla', label: 'Vanilla' }
            ]

        console.log(getFlavors1);

            this.setState({ getFlavors: [...getFlavors1] });    
            console.log(this.state.getFlavors); 

    } catch(error) {

    }

    return preprocessedData;

}

async componentDidMount() {
    await this.GetFlavors();
}

<label className="form-label">
    Flavors:
</label>
<Select
    value={this.state.flavors}
    onChange={this.handleChangeFlavors}
    options={this.state.getFlavors}
/>  

异步GetFlavors（）{ 让预处理数据； 试一试{ 让getFlavors1=[ {值：'chocolate'，标签：'chocolate'}， {值：'草莓'，标签：'草莓'}， {值：“香草”，标签：“香草”} ] console.log（getFlavors1）； this.setState（{getFlavors:[…getFlavors1]}）； log（this.state.getFlavors）； }捕获（错误）{ } 返回预处理数据； } 异步组件didmount（）{ 等待这个； } 口味： 第一个

render（）

出现在

componentDidMount

运行之前。您可以通过搜索

react component lifecycle

来确认这一点

解决方案是在呈现任何使用数据的组件之前检查数据的存在。这可以通过多种方式来实现，这里我以

{data&&}

的方式来实现：

---

您需要帮助了解文档或AsyncSelect示例的哪一部分？@DrewReese我甚至不确定是否需要使用AsyncSelect。但是现在我的下拉菜单

options={this.state.getFlavors}

是空的，但是我知道

this.state.getFlavors

中有一些项目，我只是认为它是在得到设置之前渲染的，这通常是正常的，因为当状态更新时组件会再次重新渲染。一个问题可能是，

Select

在后续重新加载时可能不会重置选项，因此可能需要异步选择。不过，我也不太熟悉。你可以用这个代码和选项来创建一个简单的运行代码框，让我们在其中进行调试。这是一个很好的方法，但是当我这么做的时候，SELECT甚至没有加载正确的内容，我甚至认为它是有意的，因为<代码>选择/代码>无论如何都不能被使用，除非它有选项。一旦用请求的数据更新了

状态

（这应该会很快发生），

render（）

将再次执行（通过React自动执行），显示

选择

，以及它现在拥有的选项。此外，我在回答中添加了一个异步注释，这可能是您需要进行的更改。尝试这样做。componentDidMount=async（）=>{}

{this.state.getFlavors &&
    <Select
        value={this.state.flavors}
        onChange={this.handleChangeFlavors}
        options={this.state.getFlavors}
    />
}

componentDidMount() {
    fetch("your url")
        .then(res => res.json())
        .then(json => this.setState({ data: json }));
}