Question

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

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

  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渲染-使用React-select

2 个答案: