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 store 中声明 carDetails 的方式。

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

carDetails 变得未定义并且 useEffect 不是运行页面刷新的原因是什么？

Answer 1

问题出在CAR_DETAILS_REQUEST。你只有return{ loading: true };所以carDetails会输掉变成undefined.

像这样更新你的减速器：

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

Answer 2

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

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

你需要坚持那种状态。为了更好地衡量，你应该 always 在计算下一个状态对象时浅拷贝现有状态，除非你有充分的理由省略部分状态。

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

如果您正在使用 axios，您的操作应该是这样的 async 函数和 await 正在呼叫 API.

如果您在 api link 中传递 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 4

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

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

为了能够在 o 之前使用它，当你想使用减速器时，你应该在每种情况下让减速器的旧状态 return 与你使用的初始状态相同，正在加载，但在初始状态中找不到
所以试着做状态的形状

state={
isloading:false,
 carDetails: []

}

也尝试每次通过 {...state ,is loading:true}

相同的状态

React useEffect 不会在页面刷新后分派 redux 操作

React useEffect doesn't dispatch the redux action after page refresh

reactjs

redux

react-redux

react-hooks

react-state-management