时间戳

首页 > 解决方案 > 反应 useFetch 钩子 + onclick / 事件

javascript - 反应 useFetch 钩子 + onclick / 事件

问题描述

我有一个自定义的可重用钩子来进行我创建的 http 调用，我在我的组件中使用它，如下所示：

const { data, error, isLoading, executeFetch } = useHttp<IArticle[]>('news', []);

在同一个组件中，我可以选择切换复选框。当复选框被切换时，我想执行另一个 API 调用：

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
        useHttp('news');
    };

    return (
        <>
            <div className={classes.articleListHeader}>
                <h1>Article List</h1>
                <small className={classes.headerSubtitle}>{data.length} Articles</small>
            </div>
            <ul>
                {data.map(article => <Article article={article} handleChange={handleChange}/>)}
            </ul>
        </>
    )

但是由于钩子的行为，我不能直接在反应函数组件之外运行钩子。

什么是解决方案/最佳实践？

标签： javascriptreactjs

解决方案

你不应该使用这样的钩子。它们应该始终位于顶层，并且可能仅在依赖关系发生变化时才被调用/重新计算（例如传递的 API 调用参数）。但是，我可以看到你已经executeFetch从钩子里回来了。你就不能这么叫吗？所以

const handleChange = (event: React.ChangeEvent<HTMLInputElement>) => {
  executeFetch();
};

推荐阅读