Question

我不确定如何修改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.

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

感谢您的帮助，谢谢。

Answer 1

添加三元运算符以在数据输入后重新加载组件以解决问题：

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

我想组件是在JSON加载之前完成的。

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

1 个答案: