使用 setState 更新 React-Select 菜單？

Question

我試圖讓 React-Select 根據用戶輸入顯示不同的下拉菜單列表：

const helpOptions = [
  { value: "user", label: "u:<String> User Operator" },
  { value: "day", label: "d:<Number> Date Operator" },
  { value: "week", label: "w:<Number> Week Operator" },
  { value: "month", label: "m:<Number> Month Operator" },
  { value: "bracket", label: "() Brackets Operator" },
  { value: "and", label: "&& AND Operator" },
  { value: "or", label: "|| OR Operator" },
  { value: "not", label: "~ NOT Operator" }
];

const userOptions = [
  { value: "john", label: "u:John" },
];

class Field extends Component {
  state = {
    menu: userOptions,
    value: ""
  };

  onInputChange = e => {
    if (e.substring(0, 1) === "?") {
      this.setState(
        {
          menu: helpOptions,
          value: e
        },
        () => {
          console.log(this.state.menu);
        }
      );
    } else {
      this.setState({
        menu: []
      });
    }
  };

  render() {
    const { menu, value } = this.state;
    console.log("rendering");
    console.log(menu);
    return (
      <Select
        isMulti
        value={value}
        options={menu}
        onInputChange={this.onInputChange}
      />
    );
  }
}

期望的行為是如果輸入到搜索字段中的文本的第一個字符是“？” 菜單將填充helpOptions的常量。 否則它將（暫時）為空。

代碼沙盒： https://codesandbox.io/s/runtime-sun-cfg71

從控制台日志中，我似乎得到了值並且渲染似乎正在工作。 但是，我仍然收到“無選項”作為 React-Select 組件的響應。

如何根據用戶的輸入動態更改 React-Select 菜單項？

Answer 1

更新

如果您希望state在調用setState后更新，您需要使用 function，它僅在更新 state 后才有效：

this.setState(state => ({
  ...state,
  menu: helpOptions
}));

---

首先，您需要在組件中調用構造函數。 其次，在react-select屬性value的文檔中不存在。 第三，最好在更改之前復制您的 state。

這是一個有效的代碼：

import React, { Component } from "react";
import Select from "react-select";
import "./styles.css";

const helpOptions = [
  { value: "user", label: "u:<String> User Operator" },
  { value: "day", label: "d:<Number> Date Operator" },
  { value: "week", label: "w:<Number> Week Operator" },
  { value: "month", label: "m:<Number> Month Operator" },
  { value: "bracket", label: "() Brackets Operator" },
  { value: "and", label: "&& AND Operator" },
  { value: "or", label: "|| OR Operator" },
  { value: "not", label: "~ NOT Operator" }
];

const userOptions = [
  { value: "john", label: "u:John" },
  { value: "stan", label: "d:Stan" },
  { value: "addison", label: "w:Addison" },
  { value: "dionis", label: "m:Dionis" }
];

class Field extends Component {
  constructor(props) {
    super(props);
    this.state = {
      menu: userOptions,
      value: ""
    };
  }

  onInputChange = e => {
    if (e.substring(0, 1) === "?") {
      console.log("help");
      this.setState({
        ...this.state,
        menu: helpOptions
      });
    } else {
      this.setState({
        ...this.state,
        menu: userOptions
      });
    }
  };

  render() {
    const { menu, value } = this.state;

    return <Select isMulti options={menu} onInputChange={this.onInputChange} />;
  }
}

export default Field;

這是關於代碼沙盒的示例。