在React中显示过滤后的数据

Question

好的，所以我最近遇到了一个带回家的编码挑战，但我失败了。其中一个原因是我不知道如何使用复选框在React中实现过滤。所以我使用CSS进行过滤，但他们希望我使用react state。

const [data, setData] = useState([]);//api call data saved here
const [publisher, setPublisher] = useState({// this state checks which checkboxes are selected or not
Nin: false,
MS: false,
SN: false
});

因此，对于任务，我必须进行API调用，这将在响应中为我提供1000多个项目。我必须过滤该对象，使其只有3种类型的产品保存在State中，我这样做没有问题。

useEffect(() => {
fetchJsonp("apicall", {
jsonpCallback: "jsonp"
})
.then((response) => response.json())
.then((json) =>
setData(
json.filter(
(x) =>
x["Publisher"] === "Nintendo" ||
x["Publisher"] === "Sony" ||
x["Publisher"] === "Microsoft"
)
)
)
.catch((err) => console.log(err));
}, []);

问题是，一旦卡片出现在屏幕上，屏幕就会吸收来自当地州的数据。用户可以选择通过复选框进行筛选，只查看任天堂、微软或索尼的产品类型，或者如果未选中复选框，则显示所有游戏。

所以我的问题是如何在react中实现这个功能？

Answer 1

只需在渲染中添加一个过滤器函数。我假设你使用的是map，所以就做一些类似的事情

return (
<>
{data.filter((item)=>{
const {Nin, MS, SN} = publisher;
if(!Nin && !MS && !SN){ //return all if no boxes checked
return true;
}
else{
return (Nin && item.publisher === 'Ninetndo') || 
(SN && item.publisher === 'Sony') || 
(MS && item.publisher === 'Microsoft')
}
}).map((x) => <Card />)}
</>
)