Reactjs React不会重新启动组件，尽管状态已修改

我有一个卡片列表，我想使用4个不同的选择/输入字段对其进行过滤/排序

对于4个过滤器中的3个，效果非常好。卡片已成功过滤和排序，并且可以毫无问题地组合过滤器

但在第一张卡片上，我必须点击两次，或者点击一次，然后激活另一个过滤器，才能看到我卡片上的变化

我不明白为什么这个特定的过滤器不会触发卡片的重新登录，因为和所有其他过滤器一样，它的值在状态中更新，如下所示：

 const [filters, setFilters] = useState({
    orderByFilter: null, // doesn't work the first time
    titleFilter: null,
    dateFilter: '',
    searchFilter: '',
  });

为了解决异步状态更新问题，我在useEffect挂钩中观察过滤器的变化，以更新过滤后的数据。同样，对其他3个过滤器也适用

useEffect(() => {
    setFilteredData(filterCards(dataCards, filters));
    // forceUpdate();
  }, [filters]);

当我在setFilteredata之后触发强制更新时，我能够使其适用于4个过滤器：

但对我来说，这就像是一个黑客，表明我不明白真正的问题是什么

有没有一种方法可以在不更新force的情况下实现此功能

---

PS：编辑代码以避免搜索引擎将其索引化，因为这是半敏感数据。

我认为这里的问题是，对于顺序过滤器，您使用的是排序，它对数组进行排序，因此最终您会得到相同的数组，但带有排序的值，它不会被React作为更改来获取，也就是说，不会触发渲染。若要解决此问题，请在初始化过滤器阵列时，尝试使用其副本：

 let filteredArray = [...valueListCards];

---

另外，将过滤后的数据保存到状态的方法也不是最优的，因为它会导致这些类型的错误，另外，您需要保持状态与实际数据同步。一个更好的办法是，基本上是在渲染时应用过滤器。

我不知道对数组进行排序不是对眼睛的反应，这确实是这里的问题，谢谢，将问题标记为已解决。我理解您对在州内保存过滤日期的关注。我还没有完全理解如何推导出状态，但我将深入研究它。

 let filteredArray = [...valueListCards];