0

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 であるコードは次のとおりです。

<p>Data: {console.log(props.data)}</p>

これにより、コンソールに 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

しようとすると<p>Data: {console.log(props.data.content.user_data[1])}</p>、エラーが返されますCan't find property user_data of undefined.

コンポーネントをラップして Reactで新しいSuspenseコンポーネントを使用しようとしreturnましたが、それでも同じエラーが発生しました。

どんな助けでも大歓迎です、ありがとう。

4

1 に答える 1

0

データが入ってきたらコンポーネントをリロードする三項演算子を追加すると、それが解決されました。

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

JSONが完全にロードされる前に、コンポーネントがロードされていたと思います。

于 2020-10-27T17:08:41.733 に答える