从 firebase 填充 react-select field 字段

Question

我正在尝试使用我的 firebase 实时数据填充 react-select 的异步组件 database.The 数据未显示为选项。

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

我已经尝试使用回调和 promise 语法来填充它。我假设 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 需要的方式对其进行格式化

感谢任何帮助。

Answer 1

你必须return你的loadOptions方法的承诺。

您缺少 return:

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

从 firebase 填充 react-select field 字段

Populate react-select field field from firebase

asynchronous

reactjs

react-select

firebase-realtime-database