如何在不重新加载页面的情况下更新特定的渲染？

Question

F代表收藏夹状态的长度，W代表观看电影状态的长度。

这就是我在导航组件中显示它们的方式：

（{{F-${totalFavorites}, W-${totalWatched}}） 在我的App.js中，这就是我通过它的方式：

totalFavorites = {this.state.favorites.length} totalWatched = {this.state.movi​​esWatched.length} 我遇到的问题是，当您按下清除按钮时，totalFavorites不会自动更新，您必须刷新页面才能显示F-0。

这是我的明确功能，位于我的按钮的onClick上：

clearMovies = () => {
this.setState({ sortedFavorites: "" });
localStorage.setItem("favorites", "");
};

忽略我尚未为WatchedMovies做的事情。所以sortedFavorites就像是收藏夹的副本。

如何做到这一点，以便在按下清除按钮时，无需重新加载页面即可更新totalFavorites？

这是submenu.js的代码：https://gist.github.com/justgoof9/d77645b270e323b31d04bd13779538a6