Redux过滤数组
Redux过滤数组
提问于 2019-12-04 15:35:14
我也读过类似的问题，但我还是想不通。当我输入时，它会过滤掉屏幕上的项目，但如果我在搜索框中删除一个字符，它就不会显示以前的项目。例如，我输入"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;
}
};回答 1
Stack Overflow用户
回答已采纳
发布于 2019-12-04 15:44:41
每次过滤时，您都会更新状态中的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);页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/59171032
复制相关文章
相似问题
腾讯云开发者
