是否可以在 React Hooks 中对 useReducer 的调度进行回调？

Question

const handleFilter = (filter_type, selection) => {
    dispatch({ type: filter_type, option: selection.option })
    filterData()
}

我有一个处理所选过滤器的useReducer。我必须调用filterData，它会根据所选过滤器过滤数据。

但是，由于不能保证 filterData 在调度之后发生，所以我不断收到延迟更新状态。

我也试过了

const handleFilter = (filter_type, selection) => {
    dispatch({ type: filter_type, option: selection.option })
    .then(filterData())
}

但这给了我一个错误Cannot read property 'then' of undefined。

有什么帮助吗？

编辑

useEffect(() => {
    const urls = [
        'http://.../v1/profiles',
    ];
    const fetchJson = url => fetch(url, get_options).then(res => res.json());
    Promise.all(urls.map(fetchJson))
        .then(([profile]) => {
            setFilteredTable(profile.result)
        })
        .catch(err => {
            console.log(err)
        });
}, []);

const init_filter = { TITLE: '', LOCATION: '' }

const [filter, dispatch] = useReducer((state, action) => {
    switch (action.type) {
        case 'TITLE':
            return { ...state, TITLE: action.option }
        case 'LOCATION':
            return { ...state, LOCATION: action.option }
        case 'RESET':
            return init_filter
        default:
            return state
    }
}, init_filter)

Answer 1

我必须调用filterData，它根据所选过滤器过滤数据。

你描述了一个监听器，你可以尝试使用useEffect钩子：

const [filter, dispatch] = useReducer(optionsReducer, initialValue);

useEffect(() => {
  filterData();
}, [filter]);

const handleFilter = (filter_type, selection) => {
  dispatch({ type: filter_type, option: selection.option });
};