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 并因此给出“Cannot read property ownerCarInfo of undefined.”

我在我的 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,
    });
  }
};

这是我的减速器：

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,
    },
  });
};

减速机：

    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>

Answer 2

如果carDetails 初始状态是一个数组，那么为什么要在 UI 中解构对象属性？再问一次……

如果在重新加载页面后状态恢复到初始状态，空数组仍然是定义的对象。您需要找出导致state.carDetails.carDetails 未定义的原因。如果你检查你的 reducer，注意到你的 CAR_DETAILS_REQUEST case 将 carDetails 状态擦除，它变成了 undefined。老实说，当您的代码在没有重新加载页面的情况下正常运行时，您没有看到这个问题，我很惊讶。

您需要保持这种状态。为了更好地衡量，您应该在计算下一个状态对象时始终浅复制现有状态，除非您有充分的理由省略部分状态。

export const carsDetailsReducer = (state = { carDetails: [] }, action) => {
  switch (action.type) {
    case CAR_DETAILS_REQUEST:
      return {
        ...state, // <-- shallow copy existing state
        loading: true,
      };

    case CAR_DETAILS_SUCCESS:
      return {
        ...state, // <-- shallow copy existing state
        loading: false,
        carDetails: action.payload
      };

    case CAR_DETAILS_FAIL:
      return {
        ...state, // <-- shallow copy existing state
        loading: false,
        error: action.payload,
      };

    default:
      return state;
  }
};

Answer 3

对我来说，我认为你应该将状态保存在

 `case CAR_DETAILS_REQUEST:
      return {
        ...state, // <-- shallow copy existing state
        loading: true,
      };
`

为了能够在 o 之前使用它，当你想使用减速器时，你应该在每种情况下使用它 让旧状态减速器返回与您也使用的初始状态相同的初始状态正在加载并且在初始状态中未找到
所以尝试制作状态的形状

state={
isloading:false,
 carDetails: []

}

也尝试每次都通过{...state ,is loading:true}来相同的状态

Answer 4

问题出在CAR_DETAILS_REQUEST。你只返回{ loading: true };，所以carDetails会丢失，变成undefined。

只需像这样更新你的减速器：

case CAR_DETAILS_REQUEST:
  return { ...state, loading: true };