React Redux 在渲染之前获取数据并执行 map function

Question

//在我从 redux 获取数据之前网站呈现并给我一个错误 //TypeError: Cannot read properties of undefined (reading 'map')

常量首页=()=> {

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>
)

}

导出默认主页

Answer 1

users应该是一个数组，因为您使用的是map function。 您将需要：

1. 设置默认值：

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

或者

2. 检查值是否已定义； 然后执行map function：

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