Question

在这种情况下，如何进行过滤时如何不失去React状态？

当我进行过滤时，我失去了以前的状态并且程序工作不正确，例如，如果我选择类别运动，然后尝试类别时尚，当我全部放弃时，我看不到任何时尚的东西选择运动。

我是React的新手，我想听听最佳实践。

    FilterCategory(e) {
    // Filter
    const filter = this.state.items.filter(
      (item) => {
        return item.category.indexOf(e.target.name) !== -1
      }
    )
    // Update state
    this.setState({
      items:filter
    })
  }

Answer 1

为什么不使用查询字符串来存储过滤器。

假设您的网址是/ products，并且选择的过滤器是“性别男性”。那么你可以追加 / products？gender = male。

现在在使用诸如react-router之类的库进行React时，您可以访问此查询参数并选择当前过滤器，然后执行您希望调用api等的任何选项。

如果您进一步选择其他过滤器，则只需再次追加新过滤器即可查询参数，例如field1 = value1＆field2 = value2＆field3 = value3 ...

再次，随着反应的位置道具改变，您将在组件中获得新的参数。

此技术的优势。 1）没有头痛的保持状态。如果不采取适当的方式，将过滤器存储在状态中可能会变得复杂而笨拙。

2）刷新页面没问题。假设您的用户选择了过滤器，并且页面被刷新，如果保存在状态中，所有过滤器都将丢失。但是，如果查询字符串完成，它将保持不变。

由于这个原因，我认为查询字符串是更好的选择，然后声明。

Answer 2

只需将过滤后的值存储为另一个状态属性即可。

state = {
  items: [],
  filteredItems: []
}

进行过滤时，请始终参考items并覆盖filteredItems

filterItems(e) {
  const filtered = this.state.items.filter(
    (item) => {
      return item.category.indexOf(e.target.name) !== -1
    }
  )

this.setState({filteredItems: filtered});
}

Answer 3

问题是您正在将项目设置为filter返回的已过滤数组。

您可以在自己的状态下使用另一个属性来存储目标的物品，这样就可以保持物品原样，就像这样：

this.state({
 items: [...yourItems],
 chosenItem: []
})

filterCategory(e) {
 let filter = this.state.items.filter((item) => {
   item.category.indexOf(e.target.name) !== -1
 })
// Update state keeping items intact
 this.setState({
  chosenItem: filter
 })
}

Answer 4

您可以仅存储和更新状态中的filter 查询，而仅在render函数中返回过滤后的项目，而不是更新状态。

class App extends React.Component {
  state = {
    items: [
      { category: ['fashion'], name: 'Gigi Hadid', id: 1 },
      { category: ['sports'], name: 'Lebron James', id: 2 },
      { category: ['fashion', 'sports'], name: 'Michael Jordan', id: 3 },
      { category: ['sports', 'tech'], name: 'Andre Iguodala', id: 4 },
      { category: ['tech'], name: 'Mark Zuckerberg', id: 5 },
    ],
    filter: '',
  }

  handleChange = (e) => {
    this.setState({ filter: e.target.value });
  }

  render() {
    const { items, filter } = this.state;
    let shownItems = items;
    if (filter) {
      shownItems = items.filter(({ category }) => category.includes(filter));
    }
    return (
      <div>
        <select value={filter} onChange={this.handleChange}>
          <option value="">All</option>
          <option value="fashion">Fashion</option>
          <option value="sports">Sports</option>
          <option value="tech">Tech</option>
        </select>
        <div>
          <ul>
            {shownItems.map(({ name, id }) => <li key={id}>{ name }</li>)}
          </ul>
        </div>
      </div>
    );
  }
}

ReactDOM.render(<App />, document.body);

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

反应过滤器最佳做法

4 个答案: