TypeError：utilData.map 不是函数问题答案

【问题标题】：TypeError: utilData.map is not a function issueTypeError：utilData.map 不是函数问题
【发布时间】：2021-11-05 23:11:16
【问题描述】：

我的 React 组件中有以下代码：

  const [utilData, setUtilData] = useState([]);

  useEffect(() => {    
      ws.current.onmessage = e => {
          const data = JSON.parse(e.data);
          console.log("data: ",data);
          setUtilData(data)          
      };
  }, []);

数据的console.log返回如下信息，应该保存在utilData状态内。

[
    {
        "env_name": "the-matrix",
        "score_one": 24,
        "memory": 1024,
        "cpu_temp": 66.4
    }
]

我不确定并且看不到我做错了什么的问题是，当我尝试使用 .map 数组方法而不是 utilData 访问每个属性时，即：

  return (
    <div>
        {
          utilData.map((data, i) => (
            <span>{data.env_name}</span>
          ))
        }

    </div>
  )

我收到错误：TypeError: utilData.map is not a function 不确定原因

【问题讨论】：

您是否尝试过注销utilData 以查看在映射之前出现的内容？如果这与您在 data 上看到的相符，如果您能够共享整个组件而不是单个 sn-ps，它可能有助于确认是否有其他任何东西在影响事情
尝试更新到 utilData 吗？ utilData.map((data, i) => ( {data.env_name} )): null 你也看到console.log("data: ",data);
@RNair - 是的，我确实看到了来自我的console.log("data: ",data) 的数据，我在我的问题中实际提到了这些数据并显示了输出。
@RNair - 似乎三元运算符解决了这个问题。所以utilData 在处理过程中是空的。请将此添加为答案，我会将其标记为已接受的解决方案。

标签： javascript arrays reactjs object array.prototype.map

【解决方案1】：

更新返回低于 sn-p，因为最初 utildata 可能是 ull

return (
    <div>
        {
          utilData ? utilData.map((data, i) => (
            <span>{data.env_name}</span>
          )) : null
        }

    </div>
  )

【讨论】：