Как обновить реагирующее состояние из реагирующего выбора мульти?

Question

Я учусь реагировать и пытаюсь обновить состояние реакции на основе выбранных элементов. Я использую реагирующий выбор. Это покажет все данные прямо сейчас. Но я хочу обновить данные, когда я выбираю опцию из поля выбора. Если я выберу несколько опций, будет обновлено состояние фильтрации выбранных опций.

const reviews = [
  {
    "id": 1,
    "rating": 5,
    "label": [
      "Sports",
      "Sleep"
    ],
  },
  {
    "id": 3,
    "rating": 5,
    "label": [
      "Sports",
      "Pain"
    ],
  },
];
class SelectCreateFilter extends React.Component {
  state = {
    multi: null,
    data: reviews,
    health: healthBenefitsOptions,
    category: productCategoryOptions, 
    products: productOptions,
  };
  handleChange = name => value => {
    this.setState({
      [name]: value,
      data: this.state.data.filter() //how to perform the data mathcing to reviews.label
    });

  };
  render() {
    return (
      <div>
          <Select
            options={groupedOptions}
            components={components}
            value={multi}
            onChange={this.handleChange('multi')}
            placeholder="Select multiple tags or products for reviews"
            isMulti
            isSearchable
          />
      </div>
    );
  }
}

Заранее спасибо за помощь. Вот код из codeandbox, так что вы можете проверить вышеуказанный код https://codesandbox.io/embed/jlro0vo4n3?fontsize=14

Answer 1

В зависимости от того, что вам нужно, вы можете сделать разные стратегии фильтрации:

Если вы хотите отобразить рецензии, которые хотя бы имеют одно из выбранных значений в ярлыке, вы должны использовать Array.some :

  handleChange = name => values => {
    this.setState(state => ({
      [name]: values,
      data:
        values.length > 0  // if at least one value selected
          ? reviews.filter(review => // go through all reviews
              values.some(value => review.label.indexOf(value.label) >= 0) // and see if at least one selected value is in the label of that review
            )
          : reviews // if no value selected, show them all
    }));
  };

Если вы хотите отобразить рецензии, которые должны иметь все выбранные значения, вы должны использовать Array.every :

  handleChange = name => values => {
    this.setState(state => ({
      [name]: values,
      data:
        values.length > 0
          ? reviews.filter(review => 
              values.every(value => review.label.indexOf(value.label) >= 0) // check if every selected value is in a row
            )
          : reviews
    }));
  };