Невозможно использовать значение, возвращаемое обработчиком React - PullRequest
Новая
       5

Невозможно использовать значение, возвращаемое обработчиком React

0 голосов
/ 13 июля 2020

Я пытаюсь использовать настраиваемую ловушку для выполнения HTTP-запросов, а затем использую редуктор для обновления состояния в компоненте.

Перехватчик работает правильно, и я могу получить ответ на запрос, но не могу для использования данных ответа в функции отправки.

Ниже приведен код:

HTTP-ловушка: 

import React, { Fragment, useState, useEffect, useReducer } from 'react';
import axios from 'axios';

export const useHttpRequest = (initialData, initialURL) => {
  const [url, setUrl] = useState(initialURL);
  const [isError, setIsError] = useState(false);

  useEffect(() => {
    const fetchData = async () => {
      console.log('in a http hook');
      setIsError(false);
      try {
        const res = await axios(url);

        console.log(res);

        const responseData = res.data.data.data;
        return responseData;
      } catch (error) {
        setIsError(true);
      }
    };

    fetchData();
  }, [url]);

  return { isError, setUrl };
};

Вызов функции в состоянии : 


  const { isError, setUrl } = useHttpRequest();

  const getCategoryData = async () => {
    setLoading();
    try {
      const Data = await setUrl('/api/v1/category');

      dispatch({
        type: SET_CATEGORYDATA,
        payload: Data
      });
    } catch (err) {}
  };

Вызов функции в компонентах, где функция передается через useContext 

  useEffect(() => {
    getCategoryData();
  }, []);

1 Ответ

1 голос
/ 13 июля 2020
  • Вы не можете await в функции setState (setUrl).
  • Вы возвращаете данные выборки, которые не используются позже.

Сначала вам нужно изменить свое мышление о том, как вы думаете об обработчиках реакции и когда вам нужно их использовать.

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

Вы должны делать это полностью или не делать этого вообще. Вы можете поместить отправку в ловушку или , вы можете забыть о ловушке и написать многоразовую fetchData функцию и дескриптор setHasError в useEffect вашего компонента.

Их много способы решить эту проблему, но это мое предпочтительное решение: 

import React, { Fragment, useState, useEffect, useReducer } from 'react';
import axios from 'axios';

export const useHttpRequest = (url, updateStore) => {
  const [hasError, setHasError] = useState(false);

  const fetchData = async (url) => {
    setHasError(false);
    try {
      const res = await axios(url);
      const responseData = res.data.data.data;
      updateStore(responseData);
    } catch (error) {
      setHasError(true);
    }
  };

  useEffect(() => {
    if (url) {
      fetchData(url);
    }
  }, [url]);

  return { fetchData, hasError };
};

// in case you want to fetch the data on component render
const { fetchData, hasError } = useHttpRequest(url, (data) => dispatch({
  type: SET_CATEGORYDATA,
  payload: data
}));

// in case you want to fetch it in a callback
const clickButton = () => {
  fetchData(someCustomUrl);
}

Наконец, вы можете обобщить своих диспетчеров, так что вам не нужно отправлять всю функцию на ловушку и отправлять только имя диспетчера .

...