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

IT技术 javascript reactjs react-redux react-select
2021-05-15 12:46:08

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

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

  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

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);
  };

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

我想出了这个答案：

  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;

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

其它你可能感兴趣的问题
上一篇如何在图例悬停时显示工具提示？ 下一篇如何在 Reactjs 中导出带有样式的无状态功能组件