使用钩子触发子组件（react-table）的重新渲染

Question

我对 React、函数式编程、Javascript 和 JSX 还很陌生，所以如果这是一个愚蠢的问题，请简单点。

我正在修改react-table v7 中的示例material-ui 表之一。原始代码可以在这里找到。该示例功能齐全，并且使用 React Hooks 而不是类，我正在使用的模板的所有组件也是如此（向 Creative-tim.com 致敬！）

我的父函数（代表仪表板应用程序中的页面），例如 Users.js 或 Stations.js 从 useEffect 挂钩内的后端 api 获取数据。然后，该数据作为 props 传递给我的子组件 ReactTables.js

由于某种原因，在父页面的 useEffect 完成后，ReactTables.js 不会收到对“data”属性的更改。但是，一旦我修改 ReactTables 子组件（在本例中为 AddAlarmDialog.js）中的数据，表就会重新呈现，并且我的所有数据都会突然出现。

当父组件的 useEffect 返回数据时，如何触发子组件的重新渲染？我注意到在旧版本的 React 中，有一个名为 componentWillReceiveProps() 的生命周期函数。这是我需要在这里效仿的行为吗？

父组件示例 (Alarms.js)：

import React, { useEffect, useState } from "react";
// @material-ui/core components

// components and whatnot
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";

import ReactTables from "../../components/Table/ReactTables";

import { server } from "../../variables/sitevars.js";

export default function Alarms() {
  const [columns] = useState([
    {
      Header: "Alarm Name",
      accessor: "aName"
    },
    {
      Header: "Location",
      accessor: "aLocation"
    },
    {
      Header: "Time",
      accessor: "aTime"
    },
    {
      Header: "Acknowledged",
      accessor: "aAcked"
    },
    {
      Header: "Active",
      accessor: "aActive"
    }
  ]);

  const [data, setData] = useState([]);
  const [tableType] = useState("");
  const [tableLabel] = useState("Alarms");

  useEffect(() => {
    async function fetchData() {
      const url = `${server}/admin/alarms/data`;
      const response = await fetch(url);
      var parsedJSON = JSON.parse(await response.json());

      var tableElement = [];
      parsedJSON.events.forEach(function(alarm) {
        tableElement = [];
        parsedJSON.tags.forEach(function(tag) {
          if (alarm.TagID === tag.IDX) {
            tableElement.aName = tag.Name;
          }
        });
        tableElement.aTime = alarm.AlarmRcvdTime;
        parsedJSON.sites.forEach(function(site) {
          if (site.IDX === alarm.SiteID) {
            tableElement.aLocation = site.Name;
          }
        });
        if (alarm.Active) {
          tableElement.aActive = true;
        } else {
          tableElement.aActive = false;
        }
        if (!alarm.AckedBy && !alarm.AckedTime) {
          tableElement.aAcked = false;
        } else {
          tableElement.aAcked = true;
        }
        //const newData = data.concat([tableElement]);
        //setData(newData);
        data.push(tableElement);
      });
    }
    fetchData().then(function() {
      setData(data);
    });
  }, [data]);

  return (
    <div>
      <GridContainer>
        <GridItem xs={12} sm={12} md={12} lg={12}>
          <ReactTables
            data={data}
            columns={columns}
            tableType={tableType}
            tableLabel={tableLabel}
          ></ReactTables>
        </GridItem>
      </GridContainer>
    </div>
  );
}

通用表子组件（ReactTables.js）：

import React, { useState } from "react";

// @material-ui/core components
import { makeStyles } from "@material-ui/core/styles";
// @material-ui/icons
import Assignment from "@material-ui/icons/Assignment";

// core components
import GridContainer from "components/Grid/GridContainer.js";
import GridItem from "components/Grid/GridItem.js";
import Card from "components/Card/Card.js";
import CardBody from "components/Card/CardBody.js";
import CardIcon from "components/Card/CardIcon.js";
import CardHeader from "components/Card/CardHeader.js";

import { cardTitle } from "assets/jss/material-dashboard-pro-react.js";
import PropTypes from "prop-types";
import EnhancedTable from "./subcomponents/EnhancedTable";

const styles = {
  cardIconTitle: {
    ...cardTitle,
    marginTop: "15px",
    marginBottom: "0px"
  }
};

const useStyles = makeStyles(styles);

export default function ReactTables(props) {
  const [data, setData] = useState(props.data);
  const [columns] = useState(props.columns);
  const [tableType] = useState(props.tableType);
  const [skipPageReset, setSkipPageReset] = useState(false)

  const updateMyData = (rowIndex, columnId, value) => {
    // We also turn on the flag to not reset the page
    setData(old =>
      old.map((row, index) => {
        if (index === rowIndex) {
          return {
            ...old[rowIndex],
            [columnId]: value
          };
        }
        return row;
      })
    );
  };

  const classes = useStyles();
  return (
    <GridContainer>
      <GridItem xs={12}>
        <Card>
          <CardHeader color="primary" icon>
            <CardIcon color="primary">
              <Assignment />
            </CardIcon>
            <h4 className={classes.cardIconTitle}>{props.tableLabel}</h4>
          </CardHeader>
          <CardBody>
            <EnhancedTable
              data={data}
              columns={columns}
              tableType={tableType}
              setData={setData}
              updateMyData={updateMyData}
              skipPageReset={skipPageReset}
              filterable
              defaultPageSize={10}
              showPaginationTop
              useGlobalFilter
              showPaginationBottom={false}
              className="-striped -highlight"
            />
          </CardBody>
        </Card>
      </GridItem>
    </GridContainer>
  );
}

ReactTables.propTypes = {
  columns: PropTypes.array.isRequired,
  data: PropTypes.array.isRequired,
  tableType: PropTypes.string.isRequired,
  tableLabel: PropTypes.string.isRequired,
  updateMyData: PropTypes.func,
  setData: PropTypes.func,
  skipPageReset: PropTypes.bool
};

**郑重声明：如果您注意到 useEffect 中有多余的代码，那是因为我在搞乱并试图看看是否可以触发重新渲染。

Answer 1

我不知道reactTable是如何处理它的渲染的，但是如果它是一个纯函数组件，那么你传递给它的props需要在它重新评估它们之前改变。当检查 props 是否改变时，react 只会做一个简单的===比较，这意味着如果你的 props 是属性正在被修改的对象，那么它仍然会被评估为同一个对象。为了解决这个问题，你需要将所有 props 视为不可变

在您的示例中，您正在推送到data数组，然后调用setData(data)，这意味着您正在传递数组的同一实例。当 React 将以前版本的数据与您在调用中设置的新版本进行比较时setDate，它会认为data没有更改，因为它是相同的引用。

为了解决这个问题，您可以通过将现有数组扩展到新数组来从旧数组创建一个新数组。所以，而不是做

data.push(tableElement);

你应该做

const newInstance = [...data, tableElement];

您的代码需要一些调整，因为看起来您添加了很多 tableElements。但这里的教训的简短版本是，你永远不应该尝试改变你的 props。始终创建一个新实例

编辑：所以，再次查看后，我认为问题在于您在 useState 挂钩中使用默认参数的方式。看起来您希望从任何 prop 更改中设置状态，但实际上，该参数只是您在首次创建组件时放入组件中的默认值。更改传入的数据属性不会以任何方式改变您的状态。

如果您想更新状态以响应 props 的更改，则需要使用 useEffect 挂钩，并将相关 prop 设置为依赖项。

但就我个人而言，我会尝试不让本质上相同的数据在两个地方重复状态。我认为最好的选择是将您的数据存储在警报组件中，并添加dataChanged回调或其他将获取新数据道具的东西，并通过回调中的参数将其传递回警报