react-select可以加載異步數據

Question

我正在嘗試使用react-select插件構建一個select組件。

在實施該項目的過程中，我遇到了一些棘手的問題。 在這里查看我的源代碼： https : //codesandbox.io/s/j148r99695

1. 我遇到的問題是我想從服務器獲取所有genresList數據並將它們映射到選擇組件。 但是，無論如何還是我做錯了什么，這是行不通的。 請參閱上面的源代碼以幫助我。

2. 我從Movies組件中獲取數據。 它工作正常，我將一個道具傳遞給FormFilter組件： <FormFilter genresList={this.state.genres} /> 。 在FormFilter組件中，我檢查this.props.genresList ，它是否可用。 但是，當我嘗試將其分配給FormFilter狀態和console.log("state", this.state.genres); 那。 它是空的。 誰能告訴我為什么？

3. 默認使用value和label來進行react-select以顯示數據以選擇組件。 但是您知道某些情況下我們必須對此進行自定義。 我通過使用map轉換為其他數組來進行嘗試。 但這是最好的方法嗎？ 如何自定義valueKey和labelKey 。

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

更新：我已經修復了我的項目。 請查看下面的鏈接。 不知何故它不起作用。 我被推薦在源代碼里面。

https://codesandbox.io/s/moym59w39p

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;

我已經寫了一條評論“ HERE-something”，讓您知道我的更改。 沒有大問題:)

Answer 2

我對您的FIDDLE做了一些更改，對我有用

就像是

import React, {Component} from "react";
import { render } from 'react-dom';
import Movies from './Movies';

import "./styles.css";

class App  extends Component {
render() {
  return (
    <div className="App">
      <Movies />
    </div>
  );
}
}

let a = document.getElementById("root");
render(<App />, a);