Обработка .map и оператора if / else для реагирующего рендера - используя React-select - PullRequest
Новая
       18

Обработка .map и оператора if / else для реагирующего рендера - используя React-select

0 голосов
/ 12 ноября 2018

Я использую реагировать на выбор и создаваемую функцию, которая позволяет вам создать новую опцию выбора - просто введите в поле выбора / ввода в качестве примера.Когда вы вводите первый пользовательский параметр, он по умолчанию превращается в группу под названием «новая группа».Когда вы создаете второй пользовательский параметр, он должен перезаписать первый в новой группе.Однако имя группы исчезает.

Это неправильный код, который приводит к такому поведению ... 

  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 ]

0 голосов
/ 12 ноября 2018

Так как в вашем случае вы знаете, что ваша группа пользовательских опций находится в самом конце вашего массива опций, я бы даже исправил меньше кода и улучшил бы его скорость / производительность с помощью следующего кода: 

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

Когда вы объявляете свою группу пользовательских опций, вы в основном знаете ее индекс и можете напрямую обновлять нужный массив, не просматривая все различные группы, которые у вас могут быть. Вот пример .

0 голосов
/ 12 ноября 2018

Я придумал этот ответ: 

  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;

Ложным результатом была перезапись свойства верхнего уровня и воссоздание его без метки. Не уверен, что есть лучший способ.

...