React Redux fetch data before render and do a map function

Question

//the website render before i fetch the data from redux and give me a error //TypeError: Cannot read properties of undefined (reading 'map')

const Home=()=> {

const dispatch = useDispatch();

//import the products list
const getProducts =  useSelector ((state) => state.getProducts);
const  { products,users, loading, error}= getProducts; //i fetch the data

const AllUsersData = [ ...(users.map(item => item.createdAt))];
 console.log(AllUsersData);

console.log(users);

useEffect(() => {
    dispatch(listProducts());
  }, [dispatch]);
  
return (
    <div className="home">
        <FeaturedInfo/>
        {loading ? (
        <h2>loading...</h2>
      ) : error ? (
        <h2>{error}</h2>
      ) : (
        <Chart data={AllUsersData} title="User Analytics" grid dataKey="Active User"/>
        )
      }
        <div className="homeWidget">
            <Widgetsmall/>
            <Widgetlg/>
        </div>
    </div>
)

}

export default Home

Answer 1

users is expected to be an array since you are using map function. You will need to either:

1. Set a default value:

const  { products = [],users = [], loading, error} = getProducts;

OR

2. Check if the value is defined; then do the map function:

const AllUsersData = users ? [ ...(users.map(item => item.createdAt))] : [];