Home / Questions / 361302
Accepted
Cristian Budzicz
Asked: 2020-06-02 08:23:54 +0800 CST 2020-06-02 08:23:54 +0800 CST

使用 axios 从 api 加载 react-select

  • 772

我正在使用react-select组件消耗来自 api-rest 的数据。数据的查询和返回工作正常。但是，以下无法加载选择中的选项

我开发的代码如下，从html中我这样称呼它：

<AsyncSelect cacheOptions defaultOptions loadOptions={this.loadRepuestos} />

然后我有我的loadRepuestos函数代码，如下所示：

loadRepuestos = (name) => {
  if(name.length > 3 && this.state.peticionActiva !== true) {
    const config = {
      headers: { Authorization: `Bearer ${this.state.token['token']}` }
    };

    let url = API_REPUESTOS_FILTER + `?name=${name}`;
    // console.log(this.state.token['token']);
    this.setState({peticionActiva: true});
    //seteo peticionActiva true para evitar que se desaten continuas peticiones
    return  axios.get(url,config)
        .then(response => {
            this.setState({peticionActiva: false});

            let lista = response.data.data;
            //armo el par {{value ... label.. } ......}
            let options = lista.map(elemento => {
                let item = {};
                item.value = elemento.id;
                item.label = elemento.name;

                return item;
            });

            console.log(options);
            // console.log({options: options});
            return {options: options};
        })
        .catch(e => {
          this.setState({peticionActiva: false});
          if(e.response)
          {
              let error = '';
              error = e.response.data.message;
              console.log(error);
              // this.setState({errorApi: error});
          }
        });
  }
}

打印到控制台，数据进来，如下所示：

在此处输入图像描述

javascript

2 Answers

  1. 你映射了吗？可以看到数据，但选择需要映射。我将它加载到另一个功能组件中 const Options = ({ id,label}) =>{ return ( )}

    • 1
  2. Best Answer

    我能够解决问题！我意识到，当我映射对 [ {id,label} ..... ] 时，id以 nro 格式而不是string格式保留。

    所以我修改了我的映射：

    let options = lista.map(elemento => {
            let item = {};
            item.value = elemento.id;
            item.label = elemento.name;

            return item;
        });

    到以下表格：

     let options = lista.map(elemento => {    
      return { value:  `${elemento.id}`, label: `${elemento.name}` };
    });

    正如您在上面的代码中看到的，我更改了 {id,value} 对的返回方式并使用了 ecmascript 字符串插值。在我的环境中，我使用 babel 和 webpack，因此会自动转译。

    react-select 包不进行自动转换似乎很疯狂。从现在开始我会考虑到它，因为这是一个很难找到的故障。

    • 0