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

Question

我对 React、函数式编程、Javascript 和 JSX 还是新手，所以如果这是一个愚蠢的问题，请放轻松。

我正在修改来自 react-table v7 的示例 material-ui tables 之一。可以找到原始代码here。该示例完全可用，并且使用的是 React Hooks 而不是类，我正在使用的模板的所有组件也是如此（向 creative-tim.com 大喊大叫！）

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

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

当父组件的 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>
  );
}

通用Table子组件（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 是否改变时，react 只会做一个简单的 === 比较，这意味着如果你的 props 是属性被修改的对象，那么它仍然会被评估为同一个对象。要解决这个问题，您需要将所有道具视为不可变

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

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

data.push(tableElement);

你应该做

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

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

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

如果你想更新状态以响应道具的变化，你将需要使用 useEffect 挂钩，并将有问题的道具设置为依赖项。

但就我个人而言，我会尽量避免在两个地方复制本质上相同的数据。我认为最好的办法是将您的数据存储在您的警报组件中，并添加一个 dataChanged 回调或将采用您的新数据道具的东西，然后通过回调中的参数将其传回警报

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

Trigger re-render of subcomponent (react-table) using hooks

rendering

reactjs

react-table

react-hooks

use-effect