reactjs - React useEffect 在页面刷新后不会调度 redux 操作

Question

我正在尝试从以下来自 API 的数据对象呈现数据。

{
    "code": 0,
    "c": "verified",
    "d": "verified",
    "leaseInfo": {
        "infoId": 6
    },
    "cpfPrice": "500.00",
    "carCurrentLocation": {
        "id": 1,
        "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
    },
    "n": "verified",
    "p": "false",
    "ownerCarInfo": {
        "brand": "Ferrari",
        "model": "0"
    },
    "serviceFeeRate": 0.10,
    "depositPrice": "100.00",
    "pics": [
        {
            "picid": 49,
            "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
        },
    ],
    "items": {
        "itemid": 5,
        "carId": "df47a56a395a49b1a5d06a58cc42ffc4"
    }
}

我正在使用 react-redux 调度一个操作，我将在名为“carDetails”的状态下获得数据。

但是，当我尝试访问数据时，如果刷新我的组件，carDetails 会变为 undefined，因此给出“无法读取未定义的属性ownerCarInfo。 “

我正在我的 React 组件中获取并解构 carDetails 的数据:

import React, {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';

const CarInfo = ({ match }) => {

const dispatch = useDispatch();
const details = useSelector((state) => state.carDetails);

const { loading, carDetails } = details;
const {pics, carCurrentLocation, items, ownerCarInfo} = carDetails;

useEffect(() => {
   dispatch(getCarDetails(match.params.id));
}, [dispatch, match]);

return (
   <div>
  {loading ? (
    <Loader></Loader>
  ) : (
    <>
      <p>{d.depositPrice}</p>
      <p>{ownerCarInfo.brand}</p>
    </>
  )}
</div>

);)

}

只要组件或 React 应用程序未刷新，它就会检索数据并正确显示。刷新页面后，carDetails 就会变成一个空数组。

这是 getCarDetails() 操作:

export const getCarDetails = (id) => async (dispatch, getState) => {
  try {
    dispatch({
      type: CAR_DETAILS_REQUEST,
    });

    const { userLogin } = getState();
    const { userInfo } = userLogin;

    const config = {
      headers: {
        Authorization: userInfo.token,
        'Content-Type': 'application/json',
      },
    };

    const { data } = await axios.get(
      `${BASE_API}/car/info/getDetails/${id}/${userInfo.bscId}`,
      config
    );

    dispatch({
      type: CAR_DETAILS_SUCCESS,
      payload: data,
    });
  } catch (error) {
    dispatch({
      type: CAR_DETAILS_FAIL,
      payload:
        error.response && error.response.data.msg
          ? error.response.data.msg
          : error.msg,
    });
  }
};

这是我的 reducer :

export const carsDetailsReducer = (state = { carDetails: [] }, action) => {
  switch (action.type) {
    case CAR_DETAILS_REQUEST:
      return { loading: true };
    case CAR_DETAILS_SUCCESS:
      return { loading: false, carDetails: action.payload };
    case CAR_DETAILS_FAIL:
      return { loading: false, error: action.payload };
    default:
      return state;
  }
};

这就是我在 redux 存储中声明 carDetails 的方式。

const reducer = combineReducers({
  carDetails: carsDetailsReducer,
});

导致 carDetails 变得未定义且 useEffect 未在页面刷新时运行的原因是什么？

Answer 1

如果您使用 axios，您的操作应如下所示，带有 async 函数和 await 当您调用 API 时。

如果您在 api 链接中传递 API 汽车 ID，则在参数中传递 id:

import axios from "axios";


export const loadData = (id) => async (dispatch) => {
  dispatch({
       type: "CAR_DETAILS_REQUEST",
    });

  const detailData = await axios.get("http:\\****/id");

  dispatch({
    type: "CAR_DETAILS_SUCCESS",
    payload: {
     success: detailData.data,
    },
  });
};

reducer :

    const initailState = { carDetails: [], loading: true };

export const carsDetailsReducer = (state = initailState, action) => {
  switch (action.type) {
    case CAR_DETAILS_REQUEST:
      return { ...state,
                loading: true
 };
    case CAR_DETAILS_SUCCESS:
      return {...state,
               loading: false,
               carDetails: action.payload 
};
    case CAR_DETAILS_FAIL:
      return { ...state,
               loading: false, 
               error: action.payload };
    default:
      return ...state;
  }
};

您的useEffect应该仅在获取数据时起作用:

import React, {useEffect} from 'react';
import { useDispatch, useSelector } from 'react-redux';

const CarInfo = ({ match }) => {

const dispatch = useDispatch();
const details = useSelector((state) => state.carDetails);

const { loading, carDetails } = details;
const {pics, carCurrentLocation, items, ownerCarInfo} = carDetails;

useEffect(() => {
   dispatch(getCarDetails(id));
}, [dispatch]);

return (
   <div>
  {loading ? (
    <Loader></Loader>
  ) : (
    <>
      <p>{d.depositPrice}</p>
      <p>{ownerCarInfo.brand}</p>
    </>
  )}
</div>

您也可以在没有 useEffect 的情况下使用它，方法是创建一个 onclick() 函数，如下所示:

const loadDetailHandler = () => {
    dispatch(getCarDetails(id));
  };

return (
    <div onClick={loadDetailHandler} >
    </div>