如何在 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

您可以从前端检查列表是否已更改，但这将需要深度克隆检查机制，这将再次无法解决您的问题，因为后端的请求仍然太多。您正在寻找的是 websockets。使用 websockets，您可以在没有 REST api 的情况下在后端和前端之间进行通信。理想情况下，您会订阅一个频道并等到收到来自后端的消息，在收到消息后，您将调用 API 以反映前端的更改。

这样，您仅在后端更改并且它们发送消息时调用 REST api，因为这就是一般 P2P 应用程序的工作方式。因为重复的 API 调用不利于性能。

Answer 2

您需要使用地图返回 jsx。

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