Question

我正在尝试使用react-select插件构建选择组件。

在实施这个项目的过程中，我遇到了一些棘手的问题。在此处查看我的源代码：https://codesandbox.io/s/j148r99695

我遇到的问题是我想从服务器获取所有genresList数据并将它们映射到选择组件。但是，无论如何还是我做错了什么，这是行不通的。请参阅上面的源代码以帮助我。
我从Movies组件中获取数据。它工作正常，我将一个道具传递给FormFilter组件：<FormFilter genresList={this.state.genres} />。在FormFilter组件中，我检查了this.props.genresList，它可用。但是，当我尝试将其分配给FormFilter状态并分配给console.log("state", this.state.genres);时。它是空的。有人可以告诉我为什么吗？
使用react-select和value的默认label显示数据以选择组件。但是您知道某些情况下我们必须对此进行自定义。我通过使用map转换为其他数组来进行尝试。但这是最好的方法吗？如何自定义valueKey和labelKey。

我正在使用react-select Beta版本2。

更新：我已经修复了我的项目。请查看下面的链接。不知何故它不起作用。我被推荐在源代码中。

Answer 1

因此，为了使它起作用，我更改了FormFilter.js实现：

import React, { Component } from "react";
import * as Animated from "react-select/lib/animated";
import AsyncSelect from "react-select/lib/Async";

class FormFilter extends Component {
  constructor(props) {
    super(props);
    this.state = {
      inputValue: "",
      selectedOption: "",
      genres: []
    };
  }

  selectGenreHandleChange = newValue => {
    const inputValue = newValue.replace(/\W/g, "");
    this.setState({ inputValue });
    console.log(inputValue);
  };

  componentDidMount() {
    this.genresOption();
  }

  filterGenres = inputValue => {
    const genres = this.genresOption();
    //HERE - return the filter
    return genres.filter(genre =>
      genre.label.toLowerCase().includes(inputValue.toLowerCase())
    );
  };

  promiseOptions = inputValue => {
    return new Promise(resolve => { // HERE - you have to return the promise
      setTimeout(() => {
        resolve(this.filterGenres(inputValue));
      }, 1000);
    });
  };

  genresOption() {
    const options = [];
    const genres = this.props.genresList.genres; //HERE - array is genres in genresList
        if (genres && genres instanceof Array) {
          genres.map(genre => options.push({ value: genre.id, label: genre.name}));
        }
    return options;
  }

  render() {
    const { inputValue } = this.state;

    if (this.state.genres) console.log("state", this.state.genres);

    if (this.props.genresList)
      console.log("Movies props", this.props.genresList);

    return (
      <div className="filter_form">
        <span className="search_element full">
          <label htmlFor="genres">Genres</label>
          <AsyncSelect
            className="select genres"
            classNamePrefix="tmdb_select"
            isMulti
            isSearchable="true"
            isClearable="true"
            cacheOptions
            components={Animated}
            value={inputValue}
            defaultOptions
            onInputChange={this.selectGenreHandleChange}
            loadOptions={this.promiseOptions}
          />
        </span>
      </div>
    );
  }
}

export default FormFilter;

我写了一条评论“这里-某物”，让您知道我的更改。没有大问题：）

Answer 2

我在您的FIDDLE中做了一些更改，对我来说有用

类似

with Worksheets("Sheet1").ListObjects("Table1")
    Str = .DisplayName & "[" & .ListColumns(1).Name & "]"
end with

react-select可以加载异步数据

2 个答案: