如何从 react-select multi 更新反应状态？

Question

我正在学习反应并尝试根据 selected 元素更新反应状态。我正在使用 react-select。它现在显示所有数据。但是我想在 select 框中的 select 选项时更新数据。如果我 select 多个选项，那么它应该更新过滤 selected 选项的状态。

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

在此先感谢您的帮助。这是来自codesandbox的代码，以便您可以检查上面的代码 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
    }));
  };

如何从 react-select multi 更新反应状态？

How to update react state from react-select multi?

reactjs

filter

react-select

react-state-management