响应useFetch钩子+ onclick /事件

Question

我有一个定制的可重用钩子来进行我创建的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>
        </>
    )

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

解决这个问题的最佳方法是什么？

Answer 1

你不应该用那样的钩子。它们应该始终位于顶层，并且可能只有在依赖项发生变化时才被调用/重新计算(例如，API调用参数传递)。但是，我可以看到您已经从钩子中返回了executeFetch。你就不能这么叫吗？所以

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

Answer 2

实现这一目标有两种方法：

1. 将checked值作为参数传递给钩子。如果选中的值正在更改请求的执行方式，则首选此选项。例如，它可以用作查询参数。为了使其正常工作，您的钩子必须以某种方式接受参数，这些参数将用作查询参数。

1. 让钩子返回一个函数，以重新获取您可以在处理程序中调用的函数。看来executeFetch可能已经是那个函数了？？