如何解决使用Ant Design List和Radio Group过滤项目
我想用Ant Design List和Radio Group创建一个过滤器。最初加载应用程序时,我想显示所有项目。选择单选按钮时,我只想显示与其值相对应的选择。我有以下代码:
const data = [
{
edges: [
{
node: {
name: "A One"
}
}
],category: "A"
},{
edges: [
{
node: {
name: "B One"
}
},{
node: {
name: "B Two"
}
}
],category: "B"
}
];
const ArticlesFilter = () => {
const options = data.map((item) => ({
label: item.category,value: item.category
}));
const [value,setValue] = useState("");
const [articles,setArticles] = useState(data);
const filterarticles = (data) =>
data.filter((item) => item.category === value);
const onChange = (e) => {
setValue(e.target.value);
setArticles(filterarticles(data));
};
const renderItem = (data) =>
data.edges.map((item) => (
<List.Item>
<Card bordered={false} style={{ width: "100%" }}>
{item.node.name}
</Card>
</List.Item>
));
return (
<>
<Radio.Group
options={options}
onChange={onChange}
value={value}
optionType="button"
/>
<List dataSource={articles} renderItem={renderItem} />
</>
);
};
问题是,当我第一次选择任何选项(A或B)时,根本没有显示任何数据。当我接下来选择任何其他选项时,数据将按前一个值(而不是当前值)过滤显示。
这是指向我的codesandbox的链接。我已经将控制台日志添加到我的onChange()
函数和render方法中,它们也显示不同的值。我的错误在哪里?非常感谢您的帮助。
解决方法
嘿,您需要做一些稍有不同的事情,onChange事件的运行速度非常快,因此,当您运行setArticles时,值状态没有改变,要实现所需的功能,可以使用useEffect挂钩,当值状态会发生变化(例如,当您单击一个单选项目时),并且可以在useEffect中设置文章,因此每次更改该选项时,文章都会被过滤:
useEffect(() => {
if (value) setArticles(data.filter((item) => item.category === value));
},[value])
const onChange = (e) => {
setValue(e.target.value);
};
这是您要看一下的分叉沙箱: https://codesandbox.io/s/antd-radio-group-filter-forked-vx3h6?file=/src/index.js
此外,效果内的 if(值)条件是避免在安装组件时过滤空字符串,因为这是值状态的初始值。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。