Phenomenon
After modifying the layouts attribute of antd's Col component to span and dynamically changing the span column width by listening to the resize event, an error is reported TypeError: Cannot read properties of undefined (reading ‘then‘).
Supplementary example one
Because I used Feibing ice.jsand wrote the following statements in the following process, the same error was reported!
import {
useRequest as useRequestHook } from 'ice';
const {
data } = useRequest(
() => wareHouseModel.data && homeService.getAllFixedAssets(wareHouseModel.data, tenantCode),
{
manual: false,
withFullResult: true,
refreshDeps: [wareHouseModel.data],
ready: !!tenantCode,
},
);
Key error code:
wareHouseModel.data && homeService.getAllFixedAssets(wareHouseModel.data, tenantCode),
It is precisely because of wareHouseModel.data &&the AND logic that the error is reported TypeError: Cannot read properties of undefined (reading ‘then‘), because if wareHouseModel.datathere is no value, it will cause the returned promiseobject to be a right or wrong! ! !
Code example 2 of antd causing this error
const Home = () => {
const [colSpan, setColSpan] = React.useState<number>(12);
React.useLayoutEffect(() => {
// 自适应每屏显示坐标点数量设置
const resizeColSpan = () => {
const width = window.innerWidth || document.documentElement.clientWidth || document.body.clientWidth;
let spanNum = 0;
if (+width >= 1415 && +width < 1850) {
spanNum = 8;
}
if (+width >= 1850) {
spanNum = 6;
}
setColSpan(spanNum);
};
// 初始时需要触发resize，否则会有样式兼容问题
resizeColSpan();
const onResize = debounce(() => {
resizeColSpan();
}, 50);
window.addEventListener('resize', onResize);
return () => {
window.removeEventListener('resize', onResize);
};
}, []);
// ...以下省略部分内容
return (
{
/* <Col {...layouts} className={`${styles['panel-item']} panel-item`}> */}
<Col span={
colSpan} className={
`${
styles['panel-item']} panel-item`}>
{
React.isValidElement(children) &&
React.cloneElement(children as React.ReactElement, {
onClick: (actionKey) => handleClick(actionKey, item),
hasRemoved: panelList.length >= 3,
})}
</Col>
);
Reason for error
Since the above code gives one let spanNum = 0;, the default value of 0 will cause an error that the element cannot be obtained. Just assign it to let spanNum = 12;.