如何将参数传递给 useEffect 挂钩

Posted 2023-04-14

【中文标题】如何将参数传递给 useEffect 挂钩

【英文标题】：How to pass argument to useEffect hook

【发布时间】：2020-08-15 13:30:12

【问题描述】：

我有几个按钮，单击它们会调用不同的 API。我的 React App 只使用 Hooks 和 Context API。 之前是这样的：

      <button class="btn margin-1-lr" onClick=this.couchbaseCallApi('/couchbase/sync/initiate/sanity')>Sync Sanity</button>
          <button class="btn margin-1-lr" onClick=this.couchbaseCallApi('/couchbase/sync/initiate/performance')>Sync Performance</button>
          <button class="btn margin-1-lr" onClick=this.couchbaseCallApi('/couchbase/sync/initiate/endurance')>Sync Endurance</button>

couchbaseCallApi 函数将使用 fetch API 调用 URL。

如何将这些端点传递给 useEffect 挂钩以调用正确的端点？

【问题讨论】：

需要查看更多代码才能提供帮助。您不需要 useEffect 来设置端点。因为这听起来不像是副作用。

【参考方案1】：

我的第一个建议是使用现有的解决方案，例如 React Query，这是一个通过 Hooks 实现的强大查询解决方案。

我不知道useEffect 是否是执行此类异步操作的最佳方法，但这是一个潜在的解决方案。您希望useEffect 在其查询的数据发生更改时重新运行，以便进入其依赖项列表。您可以使用useState 通过更改查询值来触发重新渲染。

let [query, setQuery] = useState(null);
let [results, setResults] useState(null);

useEffect(() => 
    if (!query) return;

    let cancelled = false;

    // TODO: Perform query for sanity, performance, or endurance
    // This is an example using Promises, but callbacks also work
    couchbaseCallApi(query)
        .then((results) => 
            if (!cancelled) 
                setResults(results);
            
        );

    // Cancel any on-going queries
    return () => 
        cancelled = true;
    
, [query]);

应该注意的是，这只允许您一次“同步”一件事。如果您希望每个同步（健全性、性能、持久性）都是它们自己的查询，那么您需要为每个同步提供一个 useEffect，并且依赖关系列表需要更改（我建议使用时间戳）。

要触发 api 调用，您只需更新查询：

<button class="btn margin-1-lr" onClick=() => setQuery('/couchbase/sync/initiate/sanity')>Sync Sanity</button>
<button class="btn margin-1-lr" onClick=() => setQuery('/couchbase/sync/initiate/performance')>Sync Performance</button>
<button class="btn margin-1-lr" onClick=() => setQuery('/couchbase/sync/initiate/endurance')>Sync Endurance</button>