无法读取未定义的属性（读取“拆分”）反应答案

【问题标题】：Cannot read properties of undefined (reading 'split') React无法读取未定义的属性（读取“拆分”）反应
【发布时间】：2021-11-25 18:05:01
【问题描述】：

传递产品 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 用于其他操作，这就是我在操作中添加异步的原因。否则它会给我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,
  });
};

【问题讨论】：

标签： reactjs react-redux

【解决方案1】：

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

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

【讨论】：

将状态更改为true..现在它只显示加载微调器...还尝试删除第一个dispatch(loadingStatus(true))，但问题仍然存在
这意味着加载没有设置为假？这很奇怪。控制台有错误吗？
这是我得到的错误 - link

【解决方案2】：

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

但在这种情况下，您必须将 reducer 的初始数据中的加载设置为 true

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

【讨论】：

我已将状态更改为true，但它要么只显示微调器，要么显示相同的错误
你必须在reducer中获取数据后设置加载false。像这样case "GET_FLIGHTS": return { ...state, data: action.payload, loading: false };

【解决方案3】：

我没有设置单独的操作来更改加载状态，而是在获取操作中的数据之前设置了调度。在 promise 返回后，我再次将 dispatch 设置为 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);
  }
};

【讨论】：