等待API呼叫結果和更新串列組件

我正在呼叫 REST API 并回傳聊天室。那些得到很好的回傳，正如我可以通過控制臺在物件的有效負載中看到的那樣。

現在我想在串列中顯示它。

我能夠顯示串列并下載聊天室，但不能將兩者結合起來。這就是我所做的：

import * as React from 'react';

export default function ChatRoomList({param1}) {
  var x = getChatRoom(param1)
  console.log(x)

    return  (
        <div>
             <li>{param1}</li>
             <li> asd  </li>
             <li> asd  </li>
        </div>
    );
  }


async function getChatRoom(status) {

    // status could be either 'open' or 'room'
    var dict = { 
        chatType: status,
        };

    var adminChats = await callKumulosAPIFunction(dict, 'getAdminChat')
    return adminChats
}

現在我確實嘗試簡單地await進行第一個getChatRoom(param1)呼叫。但我只能在異步函式中等待。然后我嘗試將 async 關鍵字添加到匯出函式，但這會使整個應用程式崩潰。

這里的作業流程如何？我如何將 getChatRoom 的結果映射到串列視圖上？

adminChats 的結果 (console.log(adminChats))：

uj5u.com熱心網友回復：

您需要使用 useEffect 鉤子來獲取遠程資料：

export default function ChatRoomList({param1}) {

  React.useEffect(()=>{
    (async () => {
        var x = await getChatRoom(param1)
        console.log(x)
    })()
  },[])  

    return  (
        <div>
             <li>{param1}</li>
             <li> asd  </li>
             <li> asd  </li>
        </div>
    );
  }

如果 getChatRoom 回傳的資料是一個陣列，并且想要展示出來，則需要將回應保存在一個狀態中，否則組件不會重新渲染：

export default function ChatRoomList({param1}) {
  const [chatRooms, setChatRooms] = React.useState([]);
  React.useEffect(()=>{
    (async () => {
        var x = await getChatRoom(param1)
        setChatRooms(x)
    })()
  },[])  

    return  (
        <div>
             <li>{param1}</li>
             {chatRooms.map((chatRoom , index) => {
                return <li key={index}>{JSON.stringify(chatRoom)}</li>
             })}
        </div>
    );
  }

async function getChatRoom(status) {

    // status could be either 'open' or 'room'
    var dict = { 
        chatType: status,
        };

    var adminChats = await callKumulosAPIFunction(dict, 'getAdminChat')
    return adminChats.payload
}

我建議您閱讀有關 React hooks 和生命周期管理的檔案：

1. https://reactjs.org/docs/hooks-intro.html

2. https://reactjs.org/docs/state-and-lifecycle.html

uj5u.com熱心網友回復：

您需要使用useEffect鉤子來呼叫 API。閱讀更多關于鉤子的資訊

import * as React from 'react';

     function getChatRoom(status) {
        const [chats, setChats] = React.useState([]);
    
        const getChart = async (status) => {
            // status could be either 'open' or 'room'
            const  dict = { 
            chatType: status,
            };
    
            const adminChats = await callKumulosAPIFunction(dict, 'getAdminChat');
            setChats(adminChats);
        };
    
        React.useEffect(() => {
            getChart(status)
        }, [status])
    
    
        return { chats };
    };
    
    export default function ChatRoomList({param1}) {
      const { chats } = getChatRoom(param1)
      console.log(chats)
    
        return  (
            <div>
                 <li>{param1}</li>
                 {chats?.map((chatRoom , index) => {
                   return <li key={index}>{JSON.stringify(chatRoom)}</li>
                 })}
            </div>
        );
      }

的依賴關系引數useEffect是useEffect(callback, dependencies)

讓我們探索副作用和運行：

未提供：副作用在每次渲染后運行。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs after EVERY rendering
  });  
}

空陣列 []：副作用在初始渲染后運行一次。

import { useEffect } from 'react';

function MyComponent() {
  useEffect(() => {
    // Runs ONCE after initial rendering
  }, []);
}

有道具或狀態值[prop1, prop2, ..., state1, state2]：副作用僅在任何依賴值更改時運行。

import { useEffect, useState } from 'react';

function MyComponent({ prop }) {
  const [state, setState] = useState('');
  useEffect(() => {
    // Runs ONCE after initial rendering
    // and after every rendering ONLY IF `prop` or `state` changes
  }, [prop, state]);
}

標籤：javascript 反应

上一篇：setTimeout不適用于keyup功能

下一篇：表格中的jQuery過濾器元素