如果不重新加载页面，则无法在 ReactJS 中实现仪表板更新

Question

我正在构建一个管理应用程序，其中一个是受让人，另一个是用户(投诉者，投诉人(。任务分配者和投诉者都有自己的仪表板。我想实现当投诉人提出新投诉时，它将显示在受让人仪表板上，而无需重新加载页面。我已经实现了这个，但这给了我这个错误。

无法对未挂载的组件执行 React 状态更新。这是无操作，但它表示应用程序中存在内存泄漏。若要解决此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

我已经尝试了很多次，但仍然有这个错误。

import React, { createContext, useState, useEffect } from "react";
import http from "../services/httpService";
import { getAssigneeComplaints } from "../services/complaintService";
import config from "../config.json";
export const ComplaintContext = createContext();
const ComplaintContextProvider = props => {
   const [assigneeComplaints, setAssigneeComplaints] = useState([]);
  // getting all assignee complaints
  const getAssigneeComplaint = async () => {
    const { data } = await getAssigneeComplaints();
    setAssigneeComplaints(data);
    console.log(data);
   };
  // saving a complaint
  const saveComplaint = async complaint => {
    console.log("new complaint is being saved");
    await http.post(config.apiUrl + "/complainer-complaints", complaint);
    getAssigneeComplaint();
 };
  useEffect(() => {
    getAssigneeComplaint();
  }, []);
  return (
    <>
      <ComplaintContext.Provider
        value={{
          getAssigneeComplaint,
          assigneeComplaints,
          saveComplaint
        }}
      >
        {props.children}
      </ComplaintContext.Provider>
    </>
  );
};
export default ComplaintContextProvider;

我希望在不重新加载页面的情况下在受让人的 dashbaord 上显示投诉。

Answer 1

对于实时更新，您应该使用 socket.io-react。以下链接对您很有用：https://www.npmjs.com/package/socket.io-react

Answer 2

如上面的答案，您需要使用 web-socket 进行实时更新。看看 socket.io