从 firebase 填充 react-select 字段答案

【问题标题】：Populate react-select field field from firebase从 firebase 填充 react-select 字段
【发布时间】：2019-12-02 12:14:19
【问题描述】：

我正在尝试使用我的 firebase 实时数据库中的数据填充 react-select 的异步组件。数据不会显示为选项。

React-Select 文档：https://react-select.com/async

我已经尝试了回调以及填充它的承诺语法。我假设 react-select 字段没有看到 firebase 承诺已解决。我不知道如何为此重构我的代码。

class SelectFilm extends React.Component {
    constructor(props) {
        super();
        this.loadOptions = this.loadOptions.bind(this)
    }

    loadOptions = () => {
      database.ref().once('value').then((snapshot) => {
        let films = Object.keys(snapshot.val()).map((val) => {return {value: val, label: val}})
        console.log(films);
        return films;
      })

    }

    render() {
        return (
              <AsyncSelect
                   cacheOptions
                   defaultOptions 
                   loadOptions={this.loadOptions}                            
              />    
    }

}

返回的数组电影应该被读取为 react-select 字段中的选项。但是该字段的加载指示器并没有停止。我从 firebase 检索数据，并按照我通过 console.log 检查的 react-select 需要的方式对其进行格式化。

感谢您的帮助。

【问题讨论】：

标签： reactjs asynchronous firebase-realtime-database react-select

【解决方案1】：

你必须从你的loadOptions方法返回一个promise。

您缺少return：

return database.ref().once('value').then(...

【讨论】：