Redux过滤阵列

debugcn 发表于 Dev

TToprak1

我读过类似的问题，但仍然无法弄清楚。键入时，它会过滤掉屏幕上的项目，但是如果我在搜索框中删除了一个字符，它将不会显示以前的项目。例如，我键入“ ab”会显示所有以“ ab”开头的产品名称，但是，当我删除“ b”或“ ab”时，它不会显示产品，而只会显示一个空白页。

搜索

class Search extends Component {
  handleChange = e => {
    this.props.search(e.target.value);
  };

  render() {
    return (
      <>
        <Input
          type="search"
          name="search"
          placeholder="Search"
          onChange={this.handleChange}
          value={this.props.value}
        />
      </>
    );
  }
}

const mapStateToProps = state => ({
  value: state.value
});

export default connect(mapStateToProps, { search })(Search);

行动

export const search = value => ({
  type: SEARCH,
  payload: value
});

减速器

export const Products = (
  state = {
    products: [],
    comments: [],
    value: ''
  },
  action
) => {
  switch (action.type) {
    ...
    case 'SEARCH':
      return {
        ...state,
        value: action.payload,
        products: state.products.filter(product => product.name.includes(action.payload))
      };
    default:
      return state;
  }
};

wrsx

每次进行过滤时，都会products以您的状态进行更新，因此将对先前过滤的值执行每个连续的搜索。换句话说，您将丢失products阵列的原始副本。

您只需要存储搜索值，然后任何订阅的组件都products可以从搜索值中导出过滤的产品。例如：

class Example extends Component {
  render() {
    const filteredProducts = this.props.products.filter(product =>
      product.name.includes(this.props.value)
    );
    return filteredProducts.map(product => ...)
  }
}

const mapStateToProps = state => ({
  value: state.value,
  products: state.products,
});

export default connect(mapStateToProps, { search })(Example);

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。