reactjs 如何确保所有过滤器都已在React中注册?

gblwokeq  于 2023-02-08  发布在  React
关注(0)|答案(1)|浏览(106)

我有一个动态列表,它有一个状态filters

const [filters, setFilters] = useState([])

该列表封装在一个名为ListContext的上下文中,并公开一个名为registerFilter的方法。
开发人员可以使用registerFilter向我的列表中添加任意数量的过滤器。
每个过滤器使用该registerFilter来注册自身。
现在,这就是我被卡住的地方。我想只有在所有的过滤器都注册后才能做一些事情。我该怎么做呢?
例如,假设一个开发人员想在我的列表中添加两个过滤器,分别是头衔、姓名和年龄。
我可以使用一个效果来对filters变化做出React:

useEffect(() => {
    // I know filters are changed, but how can I know that it's the end of them?
    someMethodToBeRunOnlyWhenAllFiltersAreAdded() // this is now called 3 times for title, name, and age
}, [filters])

我怎样才能解决这个问题?

3qpi33ja

3qpi33ja1#

我认为这里要走的路,只是使用内置的useMemo:

const filteredItems = useMemo(() => someMethodToBeRunOnlyWhenAllFiltersAreAdded(filters), [filters]);

假设过滤器数组是上下文保存组件中的一个状态,在更新的react版本(18+)中,状态更新是自动批处理的,并且当过滤器同步更新时,执行过滤器的函数只会被调用一次。
https://beta.reactjs.org/blog/2022/03/08/react-18-upgrade-guide#automatic-batching
还要注意的是,在StrictMode中,react会在开发期间的挂载过程中渲染所有useEffects和useMemo等两次,以更早地显示卸载/重新挂载错误。

相关问题