Reactjs React Hook React.useCallback缺少依赖项
我使用带有子组件的react表7。我使用中提供的示例构建了表。但是，我得到一个警告Reactjs React Hook React.useCallback缺少依赖项,reactjs,react-hooks,Reactjs,React Hooks,我使用带有子组件的react表7。我使用中提供的示例构建了表。但是，我得到一个警告 React Hook React.useCallback缺少依赖项：“props.setStatus”和“statusColumns”。包括它们或删除依赖项数组 依赖项在return语句之前作为变量声明，但在函数中。列名被正确识别和实现，那么为什么我会收到此警告，以及如何防止此情况发生 以下是代码实现： const EnforcementActionsTable = (props) => { const
React Hook React.useCallback缺少依赖项：“props.setStatus”和“statusColumns”。包括它们或删除依赖项数组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;
const EnforcementActionsTable=（道具）=>{
常量列=[
{
头：（）=>null，//无头
id:“扩展器”//它需要一个id
宽度：30，
单元格：（{row}）=>(
{row.isExpanded(
) : (
)}
)
},
{
标题：“编辑操作”，
id:“eaId”，
单元格：（行）=>{
返回(
{
道具展示（道具id）；
道具设置项（原始行）；
}}
/>
);
},
宽度：75，
禁用过滤器：true
},
{
标题：“添加状态”，
id:“伊斯塔斯”，
单元格：（行）=>{
返回(
{
道具.手柄展示（道具.状态Modalid）；
道具设置项（原始行）；
}}
/>
);
},
宽度：75，
禁用过滤器：true
},
{
标题：“EA代码”，
访问者：“每个代码”，
宽度：100
},
{
标题：“分配给”，
访问者：“已分配到”
},
{
标题：“起始日期”，
id:“dateInitiated”，
访问者：（d）=>{
返回d.dateInitiated？formatDateMDY（d.dateInitiated）：“”；
},
宽度：135
},
{
标题：“要求的截止日期。”，
id:“dueDateRequired”，
访问者：（d）=>{
是否返回d.dueDateRequired？“是”：“否”；
},
宽度：135
},
{
标题：“截止日期”，
id:“决斗日期”，
访问者：（d）=>{
返回d.dueDate？formatDateMDY（d.dueDate）：“”；
},
宽度：100
},
{
标题：“完成日期”，
id:“日期完成”，
访问者：（d）=>{
返回d.dateComplete？formatDateMDY（d.dateComplete）：“”；
}
},
{
标题：“过去的日子”，
id:“daysPassed”，
访问者：（d）=>{
返回d.daysPassed？{d.daysPassed}:；
}
}
];
常量状态列=[
{
标题：“编辑状态”，
id:“eaId”，
单元格：（行）=>{
返回(
{
道具.手柄展示（道具.状态Modalid）；
道具固定状态（原始行）；
}}
/>
);
},
宽度：75，
禁用过滤器：true
},
{
标题：“”，
id:“viewComplianceSchedule”，
访问者：（d）=>{
返回d.status==“合规性”(
{
道具.把手展示（道具.合规性模型）；
道具.手柄显示合规性时间表（d.tenschdIsNumber）；
}}
>
) : (
""
);
},
disableFilters：正确，
宽度：65
},
{
标题：“状态”，
访问者：“状态”
},
{
标题：“起始日期”，
id:“dateInitiated”，
访问者：（d）=>{
返回d.dateInitiated？formatDateMDY（d.dateInitiated）：“”；
}
},
{
标题：“需要响应”，
id:“需要响应”，
访问者：（d）=>{
返回d.responseRequired？“是”：“否”；
}
},
{
标题：“响应到期”，
id:“responseDue”，
访问者：（d）=>{
返回d.responseDue(
{formattedemdy（d.responseDue）}
) : (
""
);
}
},
{
标题：“收到响应”，
id:“responseReceived”，
访问者：（d）=>{
返回d.responseReceived？formatDateMDY（d.responseReceived）：“”；
}
},
{
标题：“指派的工作人员”，
访问者：“指定员工”
},
{
标题：“完成日期”，
id:“状态完成”，
访问者：（d）=>{
返回d.statusComplete？formatDateMDY（d.statusComplete）：“”；
}
},
{
标题：“评论”，
访问者：“响应建议”，
宽度：200
}
];
返回(
row.original.enforcementActionStatusList.length是否大于0(
) : (
“没有数据”
),
[]
)}
/>
);
};
导出默认强制措施ActionStable；
props.setStatusstatusColumnsrenderRowSubComponent={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]
)}
renderRowSubComponent={React.useCallback(
（{row}）=>
row.original.enforcementActionStatusList.length是否大于0(
) : (
“没有数据”
),
[状态列、道具、设置状态]
)}
在
renderRowSubComponent