React组件中TypeError: utilData.map is not a function问题求助

这个错误的核心原因是在执行.map()的时候，utilData不是一个数组——虽然你初始状态设为了空数组[]，而且控制台打印过数组格式的数据，但在某些时刻（比如WebSocket推送异常数据、JSON解析失败），utilData被设置成了非数组类型。

排查与修复步骤： #

1. 给数据解析加校验和容错
   在WebSocket的消息处理逻辑里，先确认解析后的数据是数组，再更新状态，同时处理JSON解析失败的情况：

   const [utilData, setUtilData] = useState([]);
   useEffect(() => {
     ws.current.onmessage = e => {
       try {
         const data = JSON.parse(e.data);
         console.log("Received data:", data, "Is array?", Array.isArray(data));
         // 仅当数据是数组时才更新状态
         if (Array.isArray(data)) {
           setUtilData(data);
         } else {
           console.warn("Received non-array data, fallback to empty array");
           setUtilData([]);
         }
       } catch (error) {
         console.error("Failed to parse WebSocket message:", error);
         setUtilData([]);
       }
     };
   }, []);
   

2. 渲染时加兜底判断
   为了避免渲染阶段因为状态非数组报错，在调用.map()前先判断是否为数组：

   return (
     <div>
       {Array.isArray(utilData) ? utilData.map((data, i) => (
         {/* 记得给列表项加唯一key，这里用i是临时方案，最好用数据里的唯一标识比如env_name */}
         <span key={i}>{data.env_name}</span>
       )) : <span>No valid data available</span>}
     </div>
   )
   

可能的触发场景： #

• 后端偶尔推送了非数组格式的消息（比如单个对象、错误提示字符串）
• WebSocket连接初期的握手消息或者异常推送导致JSON解析失败
• 状态更新逻辑中不小心将非数组值赋值给了utilData

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