使用Ant Design List和Radio Group过滤项目

如何解决使用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（值）条件是避免在安装组件时过滤空字符串，因为这是值状态的初始值。