我正在渲染元素列表并进行分页，列表的每一页包含3个元素。
我要插入``字段，用户可以在其中过滤所需的任何产品。过滤器正在工作。问题在于它仅过滤当前页面上的项目。
例如，如果我搜索列表第2页上的产品，则该产品不会出现。
你能告诉我如何解决吗？
由于我使用了大量文件，因此将代码放入codesandbox
谢谢。
答案 0 :(得分：1)
您遇到的问题是您在过滤数据之前对数据进行了分页。
因此，我继续进行了修改，以过滤并分页代码。我使用class ConditionSlider extends Component {
constructor (props) {
super(props);
this.state = {
condition: 1
};
};
render() {
const slideCalls = (e) => {
slideChangeState(e);
conditionText(e)
};
const slideChangeState = (e) => {
this.setState({
condition: e
})
}
let spanText;
const conditionText = (e) => {
if(e === '1' ) {
spanText = <div>Very Poor</div>
} else if (e === '2') {
spanText = <div>Poor</div>
} else if (e === '3') {
spanText = <div>Okay</div>
} else if (e === '4') {
spanText = <div>Good</div>
} else if (e === '5') {
spanText = <div>Excellent</div>
}
}
console.log(this.state.condition)
return (
<div className="slide-class">
<RangeSlider
value={this.state.condition}
onChange={e => slideCalls(e.target.value)}
min={1}
max={5}
step={1}
size='sm'
tooltip='off'
variant='primary'
/>
<p>{this.spanText}</p>
<p>{spanText}</p>
</div>
)}
};
钩子对其进行了过滤，因为在大型列表上进行过滤可能会很昂贵。
useMemo