I am getting this error -> Uncaught TypeError: Cannot destructure property 'img' of 'aboutUsData' as it is undefined.

I am using React Redux. I want to display About Data but I don't know why I am getting this error. Please anyone can you help me out? Below is the code for your reference.

import React, { useEffect } from "react";
import "./about.css";
import { useDispatch, useSelector } from "react-redux";
import { fetchAbout, fetchHomepage, removeAbout } from "../../../redux/actions/HomepageActions";
import Skeleton from "../../other/skeletons/Skeleton";

const About = () => {
  const dispatch = useDispatch();
  const aboutUsData = useSelector((state) => state.homepageReducer.data.aboutus);
  const isLoading = useSelector((state) => state.homepageReducer.isLoading);
  const { img, description, heading } = aboutUsData;

  useEffect(() => {
    dispatch(fetchHomepage());
    return () => {
      dispatch(removeAbout());
    };
  }, []);

  if (isLoading) {
    return <Skeleton aboutus={"aboutus"} />;
  }

  return (
    <>
      {aboutUsData && (
        <div
          className="dvAbout py-5"
          style={{
            background: `url(${img}) center center no-repeat`,
          }}
        >
          <div className="container">
            <div className="row mb-5">
              <div className="col-12 text-center">
                <h2 className="heading-2">{heading}</h2>
                <p className="paragraph">{description}</p>
              </div>
            </div>
            <div className="row">
              {aboutUsData.points &&
                aboutUsData.points.map((point) => {
                  const { id, img, heading, description } = point;
                  return (
                    <div key={id} className="col-md-6 col-lg-3 text-center mb-3">
                      <img src={img} width="80" alt={heading} className="img-fluid mb-3" />
                      <h5 className="heading-5 mb-3">{heading}</h5>
                      <p className="paragraph">{description}</p>
                    </div>
                  );
                })}
            </div>
          </div>
        </div>
      )}
    </>
  );
};

export default About;

HOMEPAGE REDUCER - this is the reducer where I am getting my data successfully.

const homepageiState = {
  data: {},
  isLoading: true,
  bgColor: {
    bgColour: "bg-transparent",
    borderColor: "",
    iconColor: "",
  },
};

export const homepageReducer = (state = homepageiState, { type, payload }) => {
  switch (type) {
    case actionTypes.SET_HOMEPAGE:
      return {
        ...state,
        data: payload,
        isLoading: false,
      };
    case actionTypes.REMOVE_FETCH_HEADER:
      return {
        ...state,
        isLoading: true,
      };
    case actionTypes.SET_NAV_BG_COLOR:
      return {
        ...state,
        bgColor: payload,
      };
    case actionTypes.REMOVE_ABOUT:
      return {
        ...state,
        isLoading: true,
      };
    default:
      return state;
  }
};

CodePudding user response：

This is because when the component loads then the initial value of state stays undefined. Remove the destructure code and paste it before return.

const dispatch = useDispatch();
  const aboutUsData = useSelector((state) => state.homepageReducer.data.aboutus);
  const isLoading = useSelector((state) => state.homepageReducer.isLoading);
  //const { img, description, heading } = aboutUsData;//remove from here

  useEffect(() => {
    dispatch(fetchHomepage());
    return () => {
      dispatch(removeAbout());
    };
  }, []);

  if (isLoading) {
    return <Skeleton aboutus={"aboutus"} />;
  }

  const { img, description, heading } = aboutUsData; //add here