Проблема с установкой состояния после извлечения данных (React hooks)

Question

Я играл с API и создавал приложение реакции для отображения данных. После отправки моей информации (через форму) для запроса (через ax ios) я установил состояние с помощью метода setState React Hooks, но это не очень хорошо работает, это создает редкое поведение. Я знаю, что должен использовать Эффект, но я не знаю, как.

это часть кода, в которой я устанавливаю состояние:

function Home() {
  const [search, setSearch] = useState('')
  const [visibleMsj, setVisibleMsj] = useState(false)
  const [pokemon, setPokemon] = useState({})

  const handleSearch = async (e) => {
    e.preventDefault();
    if(search === ''){
      setVisibleMsj(true)
    } else {
      setVisibleMsj(false)
      searchForPokemon()
    }
  };

  const searchForPokemon = async () => {
    const res = await getPokemon(search)
    setPokemon(res)
    console.log(pokemon)
  }

Это функция, которая отправляет запрос ( в другом файле):

import axios from "axios";

const getPokemon = async (name) => {
  return await axios
    .get(`https://pokeapi.co/api/v2/pokemon/${name}`)
    .then(function (response) {
      return response.data;
    })
    .catch(function (err) {
      console.log(err);
    });
};

export { getPokemon };

и, наконец, форма, которая выполняет метод в событии submit:

<Form onSubmit={handleSearch} id="form">
          <Form.Field>
            <Form.Input
              icon="search"
              placeholder="Search by name or id..."
              name="pokemon"
              onChange={(event) => setSearch(event.target.value)}
              value={search}
            />
          </Form.Field>
</Form>

Но в консоли я получаю это при отправке запроса: Консоль в веб-браузере

Итак, что происходит с государством ?. Кроме того, мне нужно отобразить атрибуты переменной состояния 'pokemon' ниже формы (внутри рендера), и я не могу получить эти атрибуты, возможно, потому что первое значение при монтировании - {}?.

Заранее спасибо.

Answer 1

Вы также можете поместить функцию извлечения данных в ловушку useCallback, поэтому обратный вызов изменится только тогда, когда состояние, указанное в [...], будет обновлено. Затем вы можете передать этот обратный вызов в хук useEffect. Вы не можете просто передать обычный обратный вызов в список зависимостей useEffect, так как он будет изменять каждый рендер, поэтому ловушка useEffect будет срабатывать также при каждом рендеринге.

`const fetchData = useCallback(() => YourAsyncFunction, [variables, that, change, in that function]);

const useEffect(() => {
//this will fire only when fetchData gets updated
fetchData();
}, fetchData);

`

Answer 2

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

function Home() {
    const [search, setSearch] = useState('')
    const [visibleMsj, setVisibleMsj] = useState(false)
    const [pokemon, setPokemon] = useState({})

    useEffect(() => {
       if(search === ''){
         setVisibleMsj(() => true)
       } else {
          setVisibleMsj(() => false)
          searchForPokemon()
       }
    },[search])

   const searchForPokemon = async () => {
      const res = await getPokemon(search)
      setPokemon(() => res)
   }

   ...

}

Сторона Примечание: я советую вам использовать функционал шаблон в состоянии установки. React пакетирует обновления состояния. Использование функции гарантирует, что вы всегда будете получать последние обновления, например: setState((prevState) => prevState + 1)