Как передать аргумент для использования крючка Effect

Question

У меня есть несколько кнопок, которые при нажатии вызывают разные API. Мое реагирующее приложение использует только 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 будет использовать API выборки для вызова URL.

Как передать эти конечные точки в хук useEffect для вызова правильной конечной точки

Answer 1

Моя первая рекомендация - использовать существующее решение, такое как React Query , мощное решение для запросов через хуки.

Я не знаю, является ли 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]);

Следует отметить, что это позволяет вам "синхронизировать c" только одну вещь за раз. Если вы хотите, чтобы каждый syn c (здравый смысл, производительность, выносливость) был их собственным запросом, то вам потребуется useEffect для каждого из них, и список зависимостей нужно будет изменить (я рекомендую метку времени).