Javascript 使antd表格行仅在单击时可见

我有一个简单的antd表格，其中有“State”列、“Title”列和三行，我不知道如何显示：默认情况下没有特定的行，并通过单击按钮使其可见，例如，当用户进入表格时，默认情况下有三行，但我想将行“value==OrderState.Delivered”设置为“display:hidden”，但当用户单击“已交付”按钮时，它应该是可见的；当用户单击“所有状态”按钮时，除了相同的“值===OrderState.Delivered”之外，所有内容都应该是可见的。这是我的代码，你可以试试：

---

这些是我对您的代码所做的更改

• 默认情况下，筛选事件数据不显示已交付的事件

  const [filteredEventsData, setFilteredEventsData] = useState(
    eventsData.filter((f) => f.key !== "Delivered")
  );
  

• 在filterData函数中，即使单击了所有状态，也会过滤掉传递的数据

  function filterData(filter) {
    if (filter) {
      setFilteredEventsData(eventsData.filter((f) => f.key === filter));
    } else {
      setFilteredEventsData(eventsData.filter((f) => f.key !== "Delivered"));
    }
  }
  

---

我在我的真实代码中实现了它（使用typescript），它工作正常，但默认情况下它仍然显示“已交付”我是否做错了什么？您是否实现了

const[filteredEventsData，setFilteredEventsData]=useState（eventsData.filter（（f）=>f.key！=“已交付”）也许可以检查一下箱子。它应该过滤“已交付”的输出，我得到的“eventsData”如下useffect（（）=>{//Fetch once api.cargoApi.apiCargoAccountingOrdGet（request）。然后（（res:React.SetStateAction）=>{setFilteredEventsData（res）；}，[api.cargoApi]）；我是否应该以某种方式将此“eventsData.filter（（f）=>f.key！==“Delivered”）”放入该useffect中？是的，您可以在此处添加筛选器：
setFilteredEventsData（res）