如何动态加载多选？[反应选择]

Question

如何动态加载多选？我使用 react-select 来实现 MultiSelect。

我的努力

在 componentDidMount() 中，我获取了一个数组，我想在我的多选中显示/加载它；然后将响应存储在状态中。

现在，我试图从那个状态中获取价值，但我没有得到那个价值。

我的代码

state= {Category: []}

// that category contain this values
//0: {categoryid: "1", categoryname: "Select Category"}
//1: {categoryid: "2", categoryname: "Abc"}


componentDidMount() {
    fetch("http://myURL//file.php", {
      method: "POST",

      headers: {
        Accept: "application/json",
        "Content-Type": "application/json"
      },
      body: JSON.stringify({})
    })
      .then(response => response.json())
      .then(responseJson => {
        this.setState({ Category: responseJson });
        //  If server response message same as Data Matched

        console.log(this.state.Category);
        window.parent.location = window.parent.location.href;
      })
      .catch(error => {
        console.error(error);
      });
  }

//this code is not working, display nothing

  <Select
    closeMenuOnSelect={false}
    components={animatedComponents}
    isMulti
  >
    {this.state.Category.map((e, key) => {
      return (
        <option key={key} value={e.categoryid}>
          {e.categoryname}
        </option>
      );
    })}
  </Select>

请帮我解决这个问题

Answer 1

react-select 有选项道具。

<Select
    closeMenuOnSelect={false}
    components={animatedComponents}
    options={this.state.Category.map(e => ({ label: e.categoryname, value: e.categoryid}))}
    isMulti
    onChange={newValue => this.setState({ selected: newValue })}
  />