Question

我还是对React，函数式编程，Javascript和JSX还是陌生的，所以如果这是一个愚蠢的问题，那就轻松点吧。

我正在从react-table v7修改示例物料UI表之一。原始代码可以在here中找到。该示例完全可用，并且使用React Hooks而不是类，我正在使用的模板的所有组件也是如此（大声疾呼到creative-tim.com！）

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

由于某些原因，在父页面的useEffect完成后，ReactTables.js不会收到对“数据”属性的更改。但是，一旦我修改了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是如何处理其呈现的，但是如果它是纯功能组件，那么传递给它的prop需要先更改，然后才能重新评估它们。在检查道具是否已更改时，react只会做一个简单的===比较，这意味着如果您的道具是对象，其属性正在被修改，那么它将仍然被视为同一对象。为了解决这个问题，您需要将所有道具视为不变

在您的示例中，您要推送到data数组，然后调用setData(data)，这意味着您要传递该数组的相同实例。当react将数据的先前版本与您在对setDate的调用中设置的新版本进行比较时，它将认为data尚未更改，因为它是相同的引用。

要解决此问题，您可以通过将现有阵列散布到新阵列中，从而从旧阵列中制作一个新阵列。所以，不要这样做

data.push(tableElement);

您应该

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

您的代码将需要进行一些调整，因为您似乎正在添加许多tableElements。但是这里的简短内容是，您永远不要尝试改变道具。始终创建一个新实例

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

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

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

使用挂钩触发子组件（反应表）的重新渲染

1 个答案: