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

Question

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

我正在修改 react-table v7 中的示例 material-ui 表之一。原码可在here找到.该示例功能齐全，并且使用 React Hooks 而不是类，我正在使用的模板的所有组件也是如此(向 creative-tim.com 大喊!)

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

出于某种原因，在父页面的 useEffect 完成后，ReactTables.js 不会收到对“数据” Prop 的更改。但是，一旦我修改了 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。但是这里类(class)的简短版本是你永远不应该尝试改变你的 Prop 。总是创建一个新实例

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

如果你想更新状态以响应 props 的变化，你需要使用 useEffect 钩子(Hook)，并将有问题的 prop 设置为依赖项。

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