Как я могу повторно получить API, используя реакционные хуки - PullRequest
Новая
       44

Как я могу повторно получить API, используя реакционные хуки

0 голосов
/ 06 марта 2020

devs,

Я решил наконец научиться реагировать на ловушки с тем, что я думал, будет простым проектом. Я не могу понять, как я заново получаю API, используя реакционные хуки. Вот код, который у меня есть. 

import React, { useState, useEffect } from "react"
import useFetch from "./utils/getKanya"

const kanye = "https://api.kanye.rest"

const Index = () => {
  let [kanyaQuote, setKanyeQuote] = useState(null)
  let data = useFetch(kanye)

  const getMore = () => {
    setKanyeQuote(useFetch(kanye))
  }

  return (
    <>
      <h1>Welcome to Next.js!</h1>
      <p>Here is a random Kanye West quote:</p>
      {!data ? <div>Loading...</div> : <p>{!kanyaQuote ? data : kanyaQuote}</p>}
      <button onClick={getMore}>Get new quote</button>
    </>
  )
}

export default Index
  1. Я получаю значение состояния kanyeQuote равным null
  2. Я получаю исходные данные
  3. Я либо показать "Загрузка ..." или начальную цитату
  4. Я пытаюсь настроить кнопку для повторного получения API и сохранения данных в kanyeQuote через getKanyeQuote (setState)

Это ошибка, которую я получаю Error: Invalid hook call...

Буду очень признателен за любые рекомендации, которые вы можете дать по этому вопросу.

1 Ответ

1 голос
/ 06 марта 2020

Проблема здесь в том, что вы можете использовать только хуки непосредственно внутри root вашего компонента. Это «правило хуков» номер 1. Вы можете прочитать больше об этом здесь 

  const getMore = () => {
    setKanyeQuote(useFetch(kanye) /* This cannot work! */)
  }

Есть несколько способов обойти это. Не зная внутреннего логика c в вашем useFetch -hook, я могу только предположить, что вы можете изменить его.

Изменить хук для внутренней обработки его состояния

Один из способов обойти это это могло бы изменить logi c вашего пользовательского хука useFetch, чтобы обеспечить некоторую форму функции, которая извлекает данные и обновляет состояние внутри. Затем он может выглядеть примерно так: 

const { data, doFetch } = useFetch(kanye);
useEffect(() => {
  doFetch(); // initialFetch
}, []);

const getMore = () => {
  doFetch();
};

// ...

Затем вам нужно будет изменить внутренний лог c вашего useFetch -hook, чтобы использовать useState внутри и открыть его получатель. Это будет выглядеть примерно так: 

export const useFetch = (url) => {
  const [data, setData] = useState(null);

  const doFetch = () => {
    // Do your fetch-Logic
    setData(result);
  };

  return { data, doFetch };
};

Изменить хук, чтобы вообще не обрабатывать любое состояние.

Если вы хотите управлять только состоянием загруженных данных в родительском компоненте, вы может просто предоставить функцию обернутой выборки через хук; Примерно так: 

const doFetch = useFetch(kanye);
const [data, setData] = useState(null);
useEffect(() => {
  setData(doFetch()); // initialFetch
}, []);

const getMore = () => {
  setData(doFetch())
};

// ...

Затем вам нужно будет изменить внутренний лог c вашего useFetch -hook, чтобы не иметь внутреннего состояния, и просто открыть обернутую выборку. Это будет выглядеть примерно так: 

export const useFetch = (url) => {  
  const doFetch = () => {
    // Do your fetch-Logic
    return result;
  };

  return doFetch;
};
...