Post 使用 Redux 和 Fetch API 使用 Axios 的数据获取错误结果，因此循环响应挂起

Question

我正在创建一个表单来输入数据，然后在调用与 redux 集成的数据时创建 post 时遇到问题，我使用 Axios 获取 API 并且我已经付诸行动。

当我运行时，我在网络上检查时收到了待处理的响应。这会导致我的笔记本电脑崩溃。也许你可以帮助解决我遇到的问题，谢谢。

createform.js

import React, { useEffect, useState } from "react";
import { useDispatch, useSelector } from "react-redux";
import { addTransaction, getListTransaction } from "../actions/TransactionAction.js";

export default function CreateTransaction() {
  const [customer, setCustomer] = useState("");
  const [income, setIncome] = useState("");
  const [sold, setSold] = useState("");
  const [id, setId] = useState("");
  const dispatch = useDispatch();
  const addTransactionResult = useSelector((state) => state.TransactionReducer);

  const handleSubmit = (e) => {
    e.preventDefault();
    dispatch(
      addTransaction({
        customer: customer,
        income: income,
        sold: sold,
      })
    );
  };

  useEffect(() => {
    if (addTransactionResult) {
      dispatch(addTransaction());
      setCustomer("");
      setIncome("");
      setSold("");
    }
  }, [addTransactionResult, dispatch]);

  return (
    <div className="antialiased">
      <p className="font-bold text-base mb-3">Create Transaction</p>
      <form>
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="name customer"
          type="text"
          value={customer}
          onChange={(e) => setCustomer(e.target.value)}
        />
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="Income"
          type="number"
          value={income}
          onChange={(e) => setIncome(e.target.value)}
        />
        <input
          className="form-input block w-max outline-none p-1 my-1 border"
          placeholder="Sold Out"
          type="number"
          value={sold}
          onChange={(e) => setSold(e.target.value)}
        />
        <button
          type="submit"
          className="rounded-lg my-4 w-32 text-white text-lg font-bold bg-sky-600 hover:bg-sky-700"
          onClick={(e) => handleSubmit(e)}
        >
          Create
        </button>
      </form>
    </div>
  );
}

action.js

import axios from "axios";

export const ADD_TRANSACTION = "ADD_TRANSACTION";

export const addTransaction = (data) => {
  return (dispatch) => {
    dispatch({
      type: ADD_TRANSACTION,
      payload: {
        loading: true,
        data: false,
        errorMessage: false,
      },
    });

    axios({
      method: "POST",
      url: "https://my-json-server.typicode.com/fuad-zein/DB-Dashboard-json/order",
      timeout: 120000,
      data: data,
    })
      .then((response) => {
        dispatch({
          type: ADD_TRANSACTION,
          payload: {
            loading: false,
            data: response.data,
            errorMessage: false,
          },
        });
      })
      .catch((error) => {
        dispatch({
          type: ADD_TRANSACTION,
          payload: {
            loading: false,
            data: false,
            errorMessage: error.message,
          },
        });
      });
  };
};

reduce.js

import {
  ADD_TRANSACTION,
} from "../../actions/TransactionAction";

const initialState = {
  addTransactionResult: false,
  addTransactionLoading: false,
  addTransactionError: false,
};

const TransactionReducer = (state = initialState, action) => {
  switch (action.type) {
    case ADD_TRANSACTION:
      return {
        ...state,
        addTransactionResult: action.payload.data,
        addTransactionLoading: action.payload.loading,
        addTransactionError: action.payload.errorMessage,
      };
    default:
      return state;
  }
};

export default TransactionReducer;

这是我运行我的 post 系统时的结果。

Answer 1

只需将您的 onClick 替换为：

<button
  type="submit"
  className="rounded-lg my-4 w-32 text-white text-lg font-bold bg-sky-600 hover:bg-sky-700"
  onClick={handleSubmit}
>

Answer 2

您可以通过获取列表以获取数据来更改 useUffect 中的依赖项：

useEffect(() => {
  if (addTransactionResult) {
    dispatch(addTransaction());
    setCustomer("");
    setIncome("");
    setSold("");
  }
}, [getListTransaction, dispatch]);

Post 使用 Redux 和 Fetch API 使用 Axios 的数据获取错误结果，因此循环响应挂起

Post Data With Redux and Fetch API with Axios Get Error Result so Looping Response Pending

reactjs

redux

redux-thunk

react-redux

axios