useState数组类型返回undefined而非空数组的问题求助

问题描述 #

开发管理后台面板时，为Ant Design图表准备数据：通过Redux useSelector从MongoDB获取数据，映射后存入数组类型的useState。已将data初始化为空数组，但组件初始渲染时data变为undefined，即使通过data.length做条件渲染，仍报错“data未定义”。

相关代码 #

const [data, setdata] = React.useState([]);
const [reference, setreference] = React.useState([]);
const [orderActivity, setorderActivity] = React.useState([]);
const {
  dataStreamMonthly = [],
  user,
  orders = [],
} = useSelector((state) => state.auth) ?? {};
React.useEffect(() => {
  dispatch(getMonthlyRevenue(user.refreshToken));
  dispatch(getOrders(user.refreshToken));
}, []);
React.useEffect(() => {
  let monthList = [
    "N/A",
    "January",
    "February",
    "March",
    "April",
    "May",
    "June",
    "July",
    "August",
    "September",
    "October",
    "November",
    "December",
  ];
  const source =
    dataStreamMonthly &&
    dataStreamMonthly.map((stage) => {
      const monthName = stage._id.month
        ? monthList[parseInt(stage._id.month)]
        : "N/A";
      return { type: monthName, revenue: stage.amount };
    });
  setdata(source);
  
}, [dataStreamMonthly, orders]);

问题根源 #

当dataStreamMonthly为undefined时，dataStreamMonthly && dataStreamMonthly.map(...)的运算结果是undefined，调用setdata(source)会将data从初始的空数组覆盖为undefined，后续访问data.length就会触发报错。

修复方案 #

1. 保证映射结果始终为数组
   修改source的赋值逻辑，确保无论dataStreamMonthly是否存在，都返回数组：

   const source = (dataStreamMonthly || []).map((stage) => {
     const monthName = stage._id.month
       ? monthList[parseInt(stage._id.month)]
       : "N/A";
     return { type: monthName, revenue: stage.amount };
   });
   

   或者用三元判断兜底：

   const source = dataStreamMonthly 
     ? dataStreamMonthly.map((stage) => {
         const monthName = stage._id.month
           ? monthList[parseInt(stage._id.month)]
           : "N/A";
         return { type: monthName, revenue: stage.amount };
       })
     : [];
   

2. 优化条件渲染逻辑
   避免直接访问data.length，先判断data是否存在：

   {data && data.length > 0 && <YourAntdChartComponent data={data} />}
   

3. 加固Redux状态解构
   确保useSelector的解构兜底逻辑生效，同时检查Redux中state.auth的初始状态，避免dataStreamMonthly出现意外的undefined。

内容的提问来源于stack exchange，提问作者code46