Reactjs 反应类型错误：无法读取属性'；getBoundingClientRect'；未定义的

服务器：Node.js、MongoDB、Graphql
前端：React--typescript，apollo客户端，Graphql

我认为带来数据并呈现数据是一个时间或顺序的问题。然而，我无法找到解决此问题的方法。

错误

---

未捕获的TypeError:无法读取未定义的属性“getBoundingClientRect”

未捕获（承诺中）TypeError:无法读取未定义的属性“getBoundingClientRect”

代码

---

import-React，{MutableRefObject，useCallback，useLayoutEffect，useRef，useState}从'React'导入；
从'@apollo/client'导入{gql，useQuery}；
从“../../components”导入{MainSlide}；
从“../../types”导入{MSlidersItf，MSlideItf}；
从“/mainSilderStyle”导入*作为S；
从“../../api/WindowWidth/WindowWidth”导入{GetWindowWidth}；
const GET_main滑块=gql`
质疑{
GetMain滑块{
idx
头衔{
EN
让开
}
正文{
EN
让开
}
网址
src
发布日期
}
}
`;
常量SlideMapForm=（项：MSlideItf，i:number，Count:number）=>{
返回(
);
};
导出默认函数TestBtn（）{
const{loading，error，data}=useQuery（获取主滑块）；
const mslidersliders=data&&data？.getMainSliders.length；
常量TotalSlideCount=MSlidersLength！+4；
//参考号
const slidersRef=useRef（）作为MutableRefObject；
//getSize
const windowWidth:number=GetWindowWidth（）；//浏览器窗口宽度
const[elWidth，setElWidth]=useState（0）；
错误----------------------------------------------------------------------------------------
const getEleWidth=useCallback（（）=>{
如果（数据）{
const{width}=slidersRef.current.children[2].getBoundingClientRect（）；
setElWidth（宽度+16）；//添加幻灯片边距
}
}，[数据]；
错误----------------------------------------------------------------------------------------
常量sliderMargin:number=（windowWidth-elWidth）/2；
//滑到中间
const[center，setCenter]=useState（2）；
常量滑块位置：number=elWidth*center-sliderMargin；//滑块位置初始值
//滑动控制器
const prevButton=（）=>setCenter（center-1）；
const nextButton=（）=>setCenter（center+1）；
useLayoutEffect（（）=>{
错误----------------------------------------------------------------------------------------
getEleWidth（）；
错误----------------------------------------------------------------------------------------
常数resizeLitener=（）=>{
const timening=setTimeout（（）=>getEleWidth（），150）；
清除超时（定时）；
};
window.addEventListener（'resize'，resizeLitener）；
window.addEventListener（'load'，resizeLitener）；
return（）=>{
removeEventListener（'resize'，resizeLitener）；
removeEventListener（'load'，resizeLitener）；
};
}，[TotalSlideCount，center，data，elWidth，getEleWidth，sliderPosition]；
如果（装载）返回寄存。。。；
if（error）返回console.log（`mainsilders DB error${error}`）；
返回(
{数据&&(
{Object.values（data.getMainSliders）
.slice（-2）
.map（（项，i）=>SlideMapForm（项，i，-MSlidersLength！））
{Object.values（data.getMainSliders.map（（项，i）=>SlideMapForm（项，i，0））}
{Object.values（data.getMainSliders）
.slice（-2）
.map（（项，i）=>SlideMapForm（项，i，MSlidersLength！））
)}
);
}

试试这个：

const getEleWidth = useCallback(() => {
  if (data) {
    const defaultValue = { width: 0 };
    const { width } = slidersRef.current?.children?[2]?.getBoundingClientRect?.() || defaultValue; // just check if the element you want exist 
    setElWidth(width + 16);
  }
}, [data, slidersRef.current]); //<=== add slidersRef to your dependencies

const getEleWidth=useCallback（（）=>{
如果（数据）{
const defaultValue={width:0}；
const{width}=slidersRef.current？.children？[2]？.getBoundingClientRect？（）| | defaultValue；//只需检查您想要的元素是否存在
设置宽度（宽度+16）；
}
}，[数据，滑块参考当前]// 除了检查对象是否存在（如Taghi Khavari提到的），您还可以尝试给它一个超时，这样您就可以让dom元素正确呈现。
这从来不是最好的解决方案，但它可以让您的脚本快速工作

（将使用Taghi的解决方案）

const getEleWidth = useCallback(() => {
  if (data) {
    const defaultValue = { width: 0 };
    const { width } = slidersRef.current?.children?[2]?.getBoundingClientRect?.() || defaultValue; // just check if the element you want exist 
    setElWidth(width + 16);
  }
}, [data, slidersRef.current]); //<=== add slidersRef to your dependencies

const defaultValue = { width: 0 };
setTimeout( () => {
const { width } = slidersRef.current?.children?[2]?.getBoundingClientRect?.() || defaultValue; // just check if the element you want exist 
setElWidth(width + 16);}, 20) // You can change the number of milliseconds depending on your rendering