JSON 正在控制台中打印，但在访问键的值时返回 undefined答案

【问题标题】：JSON is printing in the console but returns undefined when accessing value of a keyJSON 正在控制台中打印，但在访问键的值时返回 undefined
【发布时间】：2021-02-09 06:19:43
【问题描述】：

我不知道如何修改 useEffect 函数（或使用 React 的新 Suspense 组件）以在渲染组件之前等待所有数据加载。

这是从 Flask 后端引入数据的代码：

import socketIOClient from "socket.io-client";
const ENDPOINT = "http://127.0.0.1:5000";

const [response, setResponse] = useState("");

  useEffect(() => {
    const socket = socketIOClient(ENDPOINT);
    socket.emit('test', {"name": "jim"})
    socket.on("test_client", data => {
      setResponse(data);
    }));
  }, []);

这是 console.log 的 JSON 代码：

Data: {console.log(props.data)}

这会在控制台中返回 JSON：

{content: {…}}
content:
     exchanges: (3) ["Deribit", "bybit", "BitMEX"]
     user_data: (10) [1, "testuser", "testuser", 
      "$5$rounds=535000$obwWzc1uoSI4MMFT$YruKioA8n321NDsX1UHXGtiY8rgfsBD.5z17kZ1UOnD", 
      "test@dwm.fund", "DWM", "United States", {…}, "1597353995233", 3]
     __proto__: Object
     __proto__: Object

尝试Data: {console.log(props.data.content.user_data[1])}时，返回错误Can't find property user_data of undefined.

我尝试在 React 中使用新的 Suspense 组件，将我的组件包装在 return 中，但我仍然收到相同的错误。

感谢您的帮助，谢谢。

【问题讨论】：

您好，可能是缺少内容或顶级数组中有多个元素？
我不确定您所说的内容丢失是什么意思，如果我执行props.data，它会控制台记录我正在移动的所有 json 数据，但如果我执行props.data.content.user_data[1]，它会返回未定义，即使它在控制台中显示props.data.content.user_data[1]，如果我这样做props.data
这更像是您的 ui 中的一个问题，请分享更多您的 jsx 代码，当数据尚未加载时，您应该放置一个微调器/加载器

标签： reactjs flask socket.io react-suspense

【解决方案1】：

添加一个三元运算符，使组件在数据进入后重新加载解决它：

Data: {props.data ? props.data.content.user_data[1] : "Data is loading..."}

我猜想组件在 JSON 可以完全加载之前就已经加载了。

【讨论】：