0

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

无法对未安装的组件执行 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;

我希望在受让人的仪表板上显示投诉而不重新加载页面。

4

2 回答 2

0

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

于 2019-07-25T10:34:55.023 回答
0

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

于 2019-07-25T10:44:46.900 回答