如何将参数传递给useEffect钩子

Question

我有几个按钮，单击这些按钮可以调用不同的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>

其中bedbasebaseCallApi函数将使用访存API调用URL。

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

Answer 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，并且依赖项列表也需要更改（我建议添加时间戳）。