时间戳

首页 > 解决方案 > 从 firebase 填充 react-select 字段

reactjs - 从 firebase 填充 react-select 字段

问题描述

我正在尝试使用我的 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 需要的方式对其进行格式化。

我很感激任何帮助。

标签： reactjsasynchronousfirebase-realtime-databasereact-select

解决方案

您必须从您的loadOptions方法返回一个承诺。

您缺少一个return：

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

推荐阅读