如何在 React 中更新來自 api 的 json 數據？

Question

在 React 項目中，我從后端計算 API 以了解此人何時對視頻通話（VC）請求進行了更改。 例如，作為用戶，我向那個人請求 VC，當那個人更新 VC 狀態（如“已接受”、“拒絕”或“重新安排”）時，該數據將反映在前端，即 React 代碼中。 我正在使用不依賴數組的 useEffect 每 10 秒運行一次以獲取狀態數據。 但是，這里的主要問題是資源利用率很高並且后端服務器凍結。 那么獲取“更改”后端數據的最佳解決方案是什么。

以下是供參考的代碼

const [allRequestsData, setAllRequestsData] = useState([])

const myRequestsData = async () => {
        var newRequest = await fetch(`${config.baseUrl}videocall/list`, {
            method: 'GET',
            headers: {
                'ApiKey': config.apiKey,
                'artistid': config.artistId,
                'platform': config.platform,
                'V': config.version,
                'Product': 'apm',
                'Authorization': sessionStorage.getItem('tokenNew')
            }
        }).then((data) => data.json())
        setAllRequestsData(newRequest.data.list)
    }


useEffect(() => {
        myRequestsData()
}, []) {/* <-- Here the function is updated only once */}

{/*
useEffect(() => {
        setInterval(() => {
       myRequestsData()
}, 10000)
})
 */} {/* Here the server freezes as it continuously calls data from backend every 10 seconds */}

我的意圖是僅當另一端的人更新狀態數據時才更新 VC 的狀態。 為了清楚起見，請參閱以下代碼

allRequestsData.map((data) => {
data.status == "Accepted" ? (<h2>Accepted</h2>) : data.status == "Rejected" ? (<h2>Rejected</h2>) : ''
})

如上所示，狀態數據需要更新，但僅在后端數據更改時才顯示數據。

那么，只有在后端數據發生更改時才顯示數據的合適解決方案是什么？

Answer 1

您需要使用 map 返回 jsx。

function App() {
  // ...
  useEffect(() => {
    setInterval(() => {
       myRequestsData()
    }, 10000)
  }, [])
  return (
   <>
    {
     allRequestsData.map((data) => {
       return data.status == "Accepted" ? (<h2>Accepted</h2>) : data.status == "Rejected" ? (<h2>Rejected</h2>) : ''
     })
    }
   </>
  )
}

Answer 2

您可以從前端檢查列表是否已更改，但這將需要深度克隆檢查機制，這將再次無法解決您的問題，因為對后端的請求仍然太多。 您正在尋找的是 websockets。 使用 websockets，您可以在沒有 REST api 的情況下在后端和前端之間進行通信。 理想情況下，您將訂閱一個頻道並等到您收到來自后端的消息，收到消息后您將調用 API 以反映前端的更改。

這樣，您僅在后端更改並且它們發送消息時才調用 REST api，因為這就是一般 P2P 應用程序的工作方式。 由於重復的 API 調用不利於性能。