Блог

Главная - Вопросы по программированию - Перехватчики реакции и метод POST

Перехватчики реакции и метод POST

#javascript #reactjs #post #fetch

#javascript #reactjs #Публикация #выборка

Вопрос:

Мне нужно понять, как я могу настроить пользовательский перехват в React для метода POST.

Если мне нужно опубликовать некоторые данные после щелчка, но я не могу использовать пользовательский перехватчик в обработчике событий, как я могу это сделать?

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

Ответ №1:

Все, что вам нужно, это обработчик, который запускает метод post

 const useFetchData = ({url, headers, payload}) => {
    const [res, setRes] = useState({data: null, error: null, isLoading: false});
    const [error, setError]
    // You POST method here
    const callAPI = useCallback(() => {
         setRes(prevState => ({...prevState, isLoading: true}));
         axios.post(url, headers, payload).then(res => {
            setRes({data: res.data, isLoading: false, error: null});
         }).catch((error) => {
            setRes({data: null, isLoading: false, error});
         })
    }, [url, headers, payload])
    return [res, callAPI];
}

Теперь вы можете использовать этот перехват в своем коде и для любого обработчика событий просто вызвать callAPI возвращаемый из перехвата, например

 const MyFunc = () => {
   const [res, apiMethod] = useFetchData({url: 'some url here', headers: {ContentType: 'text/plain'}, payload: {}});

   return (
      <button onClick={() => {apiMethod()}} type="button">Submit data</button>
   )
}

Вы могли бы в случае события определить полезную нагрузку в состоянии компонента и передать ее useFetchData в качестве аргумента.

Комментарии:

1. Прохладный… У меня были некоторые сомнения по этому поводу, но теперь все ясно. Большое спасибо, приятель.

2. это решение не будет работать, если вы попытаетесь использовать apiMethod внутри useEffect. произойдет бесконечный цикл

3. но в моем случае res я получаю {data: null, error: null, isLoading: false}, даже сеть показывает правильное значение для ответа

4. для тех, кто использует typescript, возвращаемый тип должен быть return [res, callAPI] как const;

5. @cacoder поскольку ваш массив зависимостей useCallback для полезной нагрузки или заголовков может быть объектом или массивом, а в javascript сравнение двух похожих объектов всегда возвращает false, например, {} !== {} потому что они сравниваются с его ссылкой, для решения вашей проблемы вы должны изменить массив зависимостей на [url, JSON.stringify(headers), JSON.stringify(payload)]