Javascript 如何使用react钩子将状态从子组件传递到父组件？

我的父组件如下所示。这里我想在子组件中设置setLoading函数 装载

const reportrecoverdetail=React.memo（（）=>{
常量[selectedDates，setSelectedDates]=useState（[]）；
const[loading，setLoading]=useState（false）；
常量[isOpen，setIsOpen]=useState（false）；
返回(
选择要继续的日期范围：
currentDate.isAfter（矩（））}
/>
{选定日期(
) : ()
}
);
});
导出默认报表详细信息；

子组件如下所示。但是我得到一个错误，错误：无效的钩子调用。钩子只能在函数组件的主体内部调用。这可能是由于以下原因之一：

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本

const GenerateReport=React.memo(
({
柱，
报告类型，
报告名称，
面包屑名，
文件下载URL，
下载报告，
下载报告名，
选择DaterRange，
伊索本，
isLoadingCallBack
}) => {
const[show，setShow]=useState（false）；
//常量[isOpen，setIsOpen]=useState（false）；
常量[pageNumber，setPageNumber]=使用状态（1）；
const[pageSize，setPageSize]=useState（10）；
常量[selectedDates，setSelectedDates]=使用状态（SelectedDaterRange）；
const[performedActionList，setPerformedActionList]=useState（[]）；
const[totalCount，SetTotalCount]=useState（0）；
const[loading，setLoading]=useState（false）；
const[requiredTotal，setRequiredTotal]=useState（true）；
const dispatch=usedpatch（）；
常量getRecurrentData=（日期字符串）=>{
isLoadingCallBack（true）；
设置加载（真）；
设置显示（正确）；
});
};
返回(
{表演(
setPageSize（大小）}
hideOnSinglePage={false}
showTotal={（总计）=>{
返回'Total${Total}项'；
}}
/>
setPageSize（大小）}
hideOnSinglePage={false}
showTotal={（总计）=>{
返回'Total${Total}项'；
}}
/>
) : (
)}
);
}
);

不要将

setLoading

传递给子组件，而是将钩子调用包装在父组件中用户定义的方法中

...
const toggleLoading = (value) => {
  setLoading(value)
}
...
return ...

并在子组件的props

isLoadingCallBack={toggleload}

中使用该方法。根据复杂性，将父状态包装在上下文[1]中是有意义的，这样您就可以访问子树中的任意位置的值/设置器

---

[1]

此错误有错误描述中列出的3个原因

React和渲染器的版本可能不匹配（例如React DOM）

你可能违反了钩子的规则

同一应用程序中可能有多个React副本

让我们先看看2号，以确保我们遵守了钩子的规则

<>你的代码看起来很好，但是让我们拿一小部分工作代码，我们确信它可以在你的环境中尝试它，在这里尝试这个例子，把它放在一个单独的页面/路径中，如果它工作，那么问题将在你的代码中进行，我们将在其中进行更多的研究。 现在排名第一

React和渲染器的版本可能不匹配（例如 反应（DOM）

建议的解决方案：

仔细检查react和react dom版本

现在是第3名

同一应用程序中可能有多个React副本

建议的解决方案：

尝试解决此问题的方法

const GenerateReport = React.memo(
    ({
        columns,
        reportType,
        reportName,
        breadcrumbName,
        fileDownloadUrl,
        downloadReport,
        downloadReportName,
        selectedDateRange,
        isOpen,
        isLoadingCallBack
    }) => {
        const [show, setShow] = useState(false);
        //const [isOpen, setIsOpen] = useState(false);
        const [pageNumber, setPageNumber] = useState(1);
        const [pageSize, setPageSize] = useState(10);
        const [selectedDates, setSelectedDates] = useState(selectedDateRange);
        const [performedActionList, setPerformedActionList] = useState([]);
        const [totalCount, SetTotalCount] = useState(0);
        const [loading, setLoading] = useState(false);
        const [requiredTotal, setRequiredTotal] = useState(true);
        const dispatch = useDispatch();

 const getRecurrentData = (dateStrings) => {
            isLoadingCallBack(true);
            setLoading(true);
            setShow(true);
 });
        };

return (
            <>
                {show ? (
                    <Spin spinning={loading}>
                        <ViewBoxBody
                            loading={loading}
                            showPrimaryButton={false}
                            columns={columns}
                            filterSearchBar={false}
                            dataSource={performedActionList}
                            onPaginationClick={onPaginationClick}
                            currentPage={pageNumber}
                            totalDataCount={totalCount}
                            pageSize={pageSize}
                            showSizeChanger={true}
                            onShowSizeChange={(curent, size) => setPageSize(size)}
                            hideOnSinglePage={false}
                            showTotal={(total) => {
                                return `Total ${total} items`;
                            }}
                        />
                        <ViewBoxFooter

                            onPaginationClick={onPaginationClick}
                            currentPage={pageNumber}
                            totalDataCount={totalCount}
                            pageSize={pageSize}
                            showSizeChanger={true}
                            onShowSizeChange={(curent, size) => setPageSize(size)}
                            hideOnSinglePage={false}
                            showTotal={(total) => {
                                return `Total ${total} items`;
                            }}
                        />
                    </Spin>
                ) : (
                    <div></div>
                )}
            </>
        );
    }
);

...
const toggleLoading = (value) => {
  setLoading(value)
}
...
return ...