使用异步函数导致数据泄露

Question

我在使用异步函数时发生数据泄漏，导致我的应用程序在导航期间无法加载第二页。

我在 get 请求中使用 async/await，并且我尝试使用清理功能来防止此泄漏，但它不起作用。

如何修复此泄漏，并在加载页面时仍然获取要加载的数据？

import React, { useEffect, useState, useContext } from "react";
import ReactTable from "react-table";
import "react-table/react-table.css";
import axios from "axios";
import StatusContext from "../../context/status/statusContext";

const Table = props => {
  const [tableData, setTableData] = useState([]);

  const statusContext = useContext(StatusContext);

  useEffect(async () => {
    await axios
      .get("/api/status")
      .then(function(response) {
        console.log(response.data);
        setTableData(
          response.data.filter(item => {
            let itemDate = new Date(item.date);
            let variableDate = new Date() - 604800000;

            return itemDate > variableDate;
          })
        );
      })
      .catch(function(error) {
        console.log(error);
      });
  }, [statusContext]);

  const columns = [
    {
      id: "Name",
      Header: "Name",
      accessor: "name"
    },
    {
      Header: "Date",
      accessor: "date"
    },
    {
      Header: "Comment",
      accessor: "comment"
    }
  ];

  return (
    <ReactTable
      data={tableData}
      columns={columns}
      pivotBy={["date"]}
      defaultPageSize={7}
      minRows={5}
    />
  );
};

export default Table;

Answer 1

这种情况真的没必要把async/await带进来，事实上useEffect带上去也没用。 useEffect 中唯一可以 return 的是清理函数，async 函数 return 是 Promise。

这应该工作得很好，包括一个清理功能，以防您在 promise 解决之前卸载您的组件：


  useEffect(() => {
    let isMounted = true;

    axios
      .get("/api/status")
      .then(function(response) {
        if (!isMounted) {
          return;
        }
        console.log(response.data);
        setTableData(
          response.data.filter(item => {
            let itemDate = new Date(item.date);
            let variableDate = new Date() - 604800000;

            return itemDate > variableDate;
          })
        );
      })
      .catch(function(error) {
        console.log(error);
      });

    return () => {
      isMounted = false;
    }
  }, [statusContext]);

使用异步函数导致数据泄露

Data leak due to using asynchronous function

node.js

reactjs

mongodb

axios

use-effect