React Hook React.useCallback 缺少依赖项

Question

我正在使用带有子组件的反应表 7。我使用React Table 7 API examples 中提供的示例构建了我的表。但是，我收到警告，

React Hook React.useCallback has missing dependencies: 'props.setStatus' and 'statusColumns'. Either include them or remove the dependency array

依赖关系在 return 语句之前作为变量声明，但在函数内。列名已被正确识别和实施，为什么我会收到此警告？如何防止这种情况发生？

下面是代码实现：

const EnforcementActionsTable = (props) => {
  const columns = [
    {
      Header: () => null, // No header
      id: "expander", // It needs an ID
      width: 30,
      Cell: ({ row }) => (
        <span {...row.getToggleRowExpandedProps()}>
          {row.isExpanded ? (
            <FontAwesomeIcon className="font-icon" icon={faCaretDown} />
          ) : (
            <FontAwesomeIcon className="font-icon" icon={faCaretRight} />
          )}
        </span>
      )
    },
    {
      Header: "Edit Action",
      id: "eaId",
      Cell: (row) => {
        return (
          <div className="text-center">
            <FontAwesomeIcon
              className="font-icon"
              icon={faEdit}
              onClick={() => {
                props.handleShow(props.id);
                props.setItem(row.original);
              }}
            />
          </div>
        );
      },
      width: 75,
      disableFilters: true
    },
    {
      Header: "Add Status",
      id: "eaStatus",
      Cell: (row) => {
        return (
          <div className="text-center">
            <FontAwesomeIcon
              className="font-icon"
              style={{ color: "green" }}
              icon={faPlusCircle}
              onClick={() => {
                props.handleShow(props.statusModalId);
                props.setItem(row.original);
              }}
            />
          </div>
        );
      },
      width: 75,
      disableFilters: true
    },
    {
      Header: "EA Code",
      accessor: "eaCode",
      width: 100
    },
    {
      Header: "Assigned To",
      accessor: "assignedTo"
    },
    {
      Header: "Date Intiated",
      id: "dateInitiated",
      accessor: (d) => {
        return d.dateInitiated ? formatDateMDY(d.dateInitiated) : "";
      },
      width: 135
    },
    {
      Header: "Due Date Req.",
      id: "dueDateRequired",
      accessor: (d) => {
        return d.dueDateRequired ? "Yes" : "No";
      },
      width: 135
    },
    {
      Header: "Due Date",
      id: "dueDate",
      accessor: (d) => {
        return d.dueDate ? formatDateMDY(d.dueDate) : "";
      },
      width: 100
    },
    {
      Header: "Date Completed",
      id: "dateComplete",
      accessor: (d) => {
        return d.dateComplete ? formatDateMDY(d.dateComplete) : "";
      }
    },
    {
      Header: "Days Past",
      id: "daysPassed",
      accessor: (d) => {
        return d.daysPassed ? <span className={d.daysPassed < 0 ? "error" : ""}>{d.daysPassed}</span> : "";
      }
    }
  ];

  const statusColumns = [
    {
      Header: "Edit Status",
      id: "eaId",
      Cell: (row) => {
        return (
          <div className="text-center">
            <FontAwesomeIcon
              className="font-icon"
              icon={faEdit}
              onClick={() => {
                props.handleShow(props.statusModalId);
                props.setStatus(row.original);
              }}
            />
          </div>
        );
      },
      width: 75,
      disableFilters: true
    },
    {
      Header: "",
      id: "viewComplianceSchedule",
      accessor: (d) => {
        return d.status === "Compliance" ? (
          <span
            style={{ textDecoration: "underline", color: "#5fa7be", cursor: "pointer" }}
            onClick={() => {
              props.handleShow(props.complianceModalId);
              props.handleShowComplianceSchedule(d.tenschdIsNumber);
            }}
          >
            <FontAwesomeIcon className="font-icon" icon={faEye} />
          </span>
        ) : (
          ""
        );
      },
      disableFilters: true,
      width: 65
    },
    {
      Header: "Status",
      accessor: "status"
    },
    {
      Header: "Initial Date",
      id: "dateInitiated",
      accessor: (d) => {
        return d.dateInitiated ? formatDateMDY(d.dateInitiated) : "";
      }
    },
    {
      Header: "Response Required",
      id: "responseRequired",
      accessor: (d) => {
        return d.responseRequired ? "Yes" : "No";
      }
    },
    {
      Header: "Response Due",
      id: "responseDue",
      accessor: (d) => {
        return d.responseDue ? (
          <span className={d.responseDue < new Date() ? "error" : ""}>{formatDateMDY(d.responseDue)}</span>
        ) : (
          ""
        );
      }
    },
    {
      Header: "Response Received",
      id: "responseReceived",
      accessor: (d) => {
        return d.responseReceived ? formatDateMDY(d.responseReceived) : "";
      }
    },
    {
      Header: "Staff Assigned",
      accessor: "assignedStaff"
    },
    {
      Header: "Date Completed",
      id: "statusComplete",
      accessor: (d) => {
        return d.statusComplete ? formatDateMDY(d.statusComplete) : "";
      }
    },
    {
      Header: "Comments",
      accessor: "responseComments",
      width: 200
    }
  ];

  return (
    <React.Fragment>
      <Row>
        <Col>
          <EnforcementStatusModal item={props.item} {...props} />
        </Col>
        <Col>
          <EnforcementActionModal item={props.item} {...props} />
        </Col>
      </Row>
      <Col>
        <ComplianceScheduleModal {...props} />
      </Col>
      <Row>
        <Col>
          <Table
            columns={columns}
            data={props.data}
            rowOnClick={true}
            rowClickHandler={props.setItem}
            renderRowSubComponent={React.useCallback(
              ({ row }) =>
                row.original.enforcementActionStatusList.length > 0 ? (
                  <Table
                    data={row.original.enforcementActionStatusList}
                    columns={statusColumns}
                    rowOnClick={true}
                    rowClickHandler={props.setStatus}
                  />
                ) : (
                  "No data"
                ),
              []
            )}
          />
        </Col>
      </Row>
    </React.Fragment>
  );
};

export default EnforcementActionsTable;

Answer 1

将props.setStatus 和statusColumns 添加到依赖数组中。

renderRowSubComponent={React.useCallback(
          ({ row }) =>
            row.original.enforcementActionStatusList.length > 0 ? (
              <Table
                data={row.original.enforcementActionStatusList}
                columns={statusColumns}
                rowOnClick={true}
                rowClickHandler={props.setStatus}
              />
            ) : (
              "No data"
            ),
          [statusColumns,props.setStatus]
        )}

根据钩子documentation

useCallback 将返回回调的记忆版本，仅当其中一个依赖项发生更改时才会更改。这在将回调传递给依赖引用相等性以防止不必要的渲染（例如 shouldComponentUpdate）的优化子组件时很有用。