TypeError: utilData.map is not a function issue

Question

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

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

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

数据returns的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>
  )

我收到错误：类型错误：utilData.map 不是一个函数 并且不确定原因

Answer 1

更新 return 下面的代码片段，因为最初 utildata 可能是 ull

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

    </div>
  )

TypeError: utilData.map is not a function issue

TypeError: utilData.map is not a function issue

javascript

arrays

reactjs

object

array.prototype.map