无法读取未定义的属性（读取 'split'）React

Question

传递产品 ID 后，我将被重定向到产品详细信息页面。在该页面中，我有产品的详细信息，例如名称、目的地、价格和日期等。当我使用 redux 并从 mongodb 获取数据时，日期保存为 2021-11-23T18:00:00.000Z 这种格式。因此，在我的产品详细信息页面中获取数据后，我使用 flight?.data?.date.split("T")[0] 仅显示日期。但是在点击按钮进入商品详情页面后，却出现如下错误TypeError: Cannot read properties of undefined (reading 'split')。但是当我从代码中删除 split 部分时，它工作正常。我想唯一的原因是代码在加载数据之前是运行。因此，为此我尝试通过分派加载操作在数据加载之前显示加载微调器。但它不起作用。我已经将 redux thunk 用于其他操作，这就是我在 Action 中添加异步的原因。否则它会给我 dispatch is not defined.

详情页

import { CircularProgress } from "@mui/material";
import React, { useEffect } from "react";
import { useSelector, useDispatch } from "react-redux";
import { useParams } from "react-router-dom";
import { getFlight, loadingStatus } from "../../actions/flights";
import "./Details.css";

const FlightDetails = () => {
  const flight = useSelector((state) => state.flights);
  console.log("flight", flight.loading);

  const dispatch = useDispatch();
  const { id } = useParams();

  useEffect(() => {
    dispatch(loadingStatus(true));
    dispatch(getFlight(id));
    dispatch(loadingStatus(false));
  }, [id, dispatch]);

  return (
    <div className="details_parent">
      {flight.loading ? (
        <CircularProgress />
      ) : (
        <div className="details_container">
          <div className="form_data">
            <span>From</span>
            <h3>{flight?.data?.from}</h3>
          </div>
          <div className="form_data">
            <span>To</span>
            <h3>{flight?.data?.to}</h3>
          </div>
          <div className="form_data">
            <span>Airline</span>
            <h3>{flight?.data?.airline}</h3>
          </div>
          <div className="form_data">
            <span>Trip type</span>
            <h3>{flight?.data?.flightType}</h3>
          </div>
          <div className="form_data">
            <span>Date(yyyy-mm-dd)</span>
            <h3>{flight?.data?.date.split("T")[0]}</h3>
          </div>
          <div className="form_data">
            <span>Price</span>
            <h1>${flight?.data?.price}</h1>
          </div>
        </div>
      )}
    </div>
  );
};

export default FlightDetails;

减速器

const initialState = {
  data: [],
  loading: false,
};
const reducer = (state = initialState, action) => {
  switch (action.type) {
    case "GET_FLIGHTS":
      return { ...state, data: action.payload };

    case "GET_FLIGHT":
      return { ...state, data: action.payload };

    case "CREATE_FLIGHT":
      return { ...state, data: { ...action.payload } };

    case "SEARCH":
      return { ...state, data: action.payload };

    case "LOADING":
      return { ...state, loading: action.payload };

    default:
      return state;
  }
};

export default reducer;

操作数

export const loadingStatus = (status) => async (dispatch) => {
  dispatch({
    type: "LOADING",
    payload: status,
  });
};

Answer 1

React 在运行任何 useEffect 调用之前运行第一个渲染。将您的初始加载状态更改为 true。

const initialState = {
  data: [],
  loading: true,
};

Answer 2

为什么你不使用 flight?.data?.date?.split("T")[0]

但在这种情况下，您必须将 loading in initial data of reducer 设置为 true

const initialState = {
  data: [],
  loading: true,
};

Answer 3

我没有设置单独的操作来更改加载状态，而是在操作中获取数据之前设置了调度。在返回承诺后，我再次将调度设置为 false。

获取具体航班数据的操作

export const getFlight = (id) => async (dispatch) => {
  try {
    dispatch({
      type: "LOADING",
      payload: true,
    });

    const { data } = await api.fetchFlight(id);

    dispatch({
      type: "GET_FLIGHT",
      payload: data,
    });
    dispatch({
      type: "LOADING",
      payload: false,
    });
  } catch (error) {
    console.log(error);
  }
};

无法读取未定义的属性（读取 'split'）React

Cannot read properties of undefined (reading 'split') React

reactjs

react-redux