首页 > 解决方案 > 在 React + Redux 中去抖方法的正确方法是什么?

问题描述

我想在过滤器组件中消除 AJAX 请求。问题是我还想在用户开始输入时显示加载器,但这会导致组件重新呈现和handleChange方法重新声明,因此去抖动无法按预期工作。处理这个问题的正确方法是什么?

const QuestionsPage: React.FunctionComponent<T.IQuestionsPageProps> = (props) => {
    const debouncedFilter = debounce(props.fetchFilteredQuestions, 500);

    const handleChange = (values: any) => {
        props.setFetching(true);
        debouncedFilter(values);
    };

    return (
        <Wrapper>
            <QuestionsSearchForm
                className={s.form}
                handleChange={handleChange}
            />
            {
                props.isFetching && <p>FETCHING</p>
            }
            { ... mapping list ... }
        </Wrapper>
    );
};

标签: javascriptreactjsreduxreact-redux

解决方案


推荐阅读