为反应渲染处理 .map 和 if/else 语句 - 使用 React-select

Question

我正在使用 react-select 和允许您创建新 select 选项的可创建函数 - 只需在示例中的 select/input 字段中键入。当您输入第一个自定义选项时，它默认进入名为 "new Group" 的组。当您创建第二个自定义选项时，这应该会覆盖新组中的第一个。但是组名消失了。

这是导致该行为的错误代码...

  if (this.state.hasCreatedOption) {
    options[this.state.hasCreatedOption] = newOption;
  } else {
    options.map(option => {
      if (option.label === "New group") {
        return {
          label: option.label,
          options: option.options.push(newOption)
        };
      }
      return option;
    });
  }

  hasCreatedOption = options.length - 1;

这是创建的示例 - https://codesandbox.io/s/w761j8v855

Answer 1

我想出了这个答案：

  if (this.state.hasCreatedOption) {
    options[this.state.hasCreatedOption].options[0] = newOption;
  } else {
    options.map(option => {
      if (option.label === "New group") {
        return {
          label: option.label,
          options: option.options.push(newOption)
        };
      }
      return option;
    });
  }

  hasCreatedOption = options.length - 1;

错误的结果是覆盖顶层属性并在没有标签的情况下重新创建它。不知道这里有没有更好的方法。

Answer 2

对于您的情况，您知道您的自定义选项组位于选项数组的最后，我什至会减少代码并使用以下代码提高它的速度/性能：

state = {
    value: this.props.options[0].options,
    options: this.props.options,
    hasCreatedOption: this.props.options.length - 1
  };
  handleCreate = input => (inputValue: any) => {
    this.setState({ isLoading: true });

    setTimeout(() => {
      const { options } = this.state;
      const newOption = createOption(inputValue);
      options[this.state.hasCreatedOption].options[0] = newOption;

      this.setState({
        isLoading: false,
        options: [...options],
        value: newOption,
        formatGroupLabel: "new label"
      });
      input.onChange(newOption);
    }, 1000);
  };

当您声明您的自定义选项组时，您基本上知道它的索引并且可以直接更新正确的数组，而无需遍历您可能拥有的所有不同组。 Here the example.

为反应渲染处理 .map 和 if/else 语句 - 使用 React-select

Handling .map and if/else statement for react render - using React-select

javascript

reactjs

react-select

react-redux