我在我的箭头函数中定义了列索引参数，但我可以在我的useEffect中使用

Question

我在箭头函数中定义列索引参数，但我可以在我的useEffect中使用原因未定义!我能做什么?

useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
if (elementRef.current) {
setBoxViewWidth(elementRef.current.clientWidth);
if (elementRef.current.clientWidth < 1200) {
elementRef.current.clientWidth.style.right = (boxViewWidth / 2) * (columnIndex % 2);
} else if (elementRef.current.clientWidth < 992) {
elementRef.current.clientWidth.style.right = (boxViewWidth / 1) * (columnIndex % 1);
}
}
});
if (elementRef.current) {
resizeObserver.observe(elementRef.current);
}
return () => {
resizeObserver.disconnect();
};
}, [boxViewWidth]);
const RenderBox = ({ style, rowIndex, columnIndex }) => {
console.log(style);
return (
rows && (
<div
style={{
...style,
right: (boxViewWidth / 3) * (columnIndex % 3),
}}
>
......

Answer 1

这里有几个问题:

在useEffect钩子中引用的

• columnIndex将是未定义的，这是因为它的值仅在RenderBox上下文中可用。所以我们需要一种不同的方式来传递它。我们可以使用data-*属性来轻松实现这一点。
• 传递给useEffect(我指的是boxViewWidth)的依赖项数组中的值可能不足以解释所有组件更新。我们还需要elementRef.current
• boxViewWidth在每次运行时更新两次。这不是一个大问题，但我们也可以解决这个问题。
• 没有HTMLElement.clientWidth.style.right这样的东西，我想我们也需要HTMLElement.style.right，修复它。

代码变成:

React.useLayoutEffect(() => {
function updateBoxViewWidth() { 
if (!elementRef.current) return
if (elementRef.current.clientWidth === boxViewWidth) return

setBoxViewWidth(elementRef.current.clientWidth)
}

updateBoxViewWidth()
}, [elementRef.current, boxViewWidth])
useEffect(() => {
const resizeObserver = new ResizeObserver(() => {
if (!elementRef.current) return
const columnIndex = elementRef.current.getAttribute('data-column-index');

if (elementRef.current.clientWidth < 1200) {
elementRef.current.style.right = (boxViewWidth / 2) * (columnIndex % 2);
} else if (elementRef.current.clientWidth < 992) {
elementRef.current.style.right = (boxViewWidth / 1) * (columnIndex % 1);
}
});
if (elementRef.current) 
resizeObserver.observe(elementRef.current);

return () => {
if (elementRef.current)
resizeObserver.disconnect();
};
}, [elementRef.current, boxViewWidth]);

const RenderBox = ({ style, rowIndex, columnIndex }) => {
console.log(style);
return (
rows && (
<div
data-column-index={columnIndex}
style={{
...style,
right: (boxViewWidth / 3) * (columnIndex % 3),
}}
>