React Ref 对象在第二次调用后自行重置
React Ref objects reset itself after second call
嗨,我正在尝试开发一个使用 ref 的程序。
let cardsRef = useRef([]);
我正在 useEffect 中创建 ref。
useEffect(() => {
cardsRef.current = cards.map((_ref, index) => {
return cardsRef.current[index] = createRef();
});
setInitialize(true);
}, [cards, isShuffled]);
return (
{cards.map(item => {
return (
<div key={item.id} ref={cardsRef.current[item.id]}>
{item.value}
</div>
);
})}
)
但是当我在
中更改卡片数组时
const shuffleArray = (array) => {
let tempArr = [];
tempArr = array.sort(() => Math.random() - 0.5);
setCards(tempArr);
setIsShuffled(true);
};
React 找不到 cardsRef.current[index].current。
因为 shuffleArray 函数重置 cardsRef 数组?我猜。
感谢您的帮助。
所以这里有一些需要注意的地方...
createRef
仅在 class 组件中使用。它是您在顶部使用的 useRef
的 class 等价物。
您不应尝试在效果挂钩内设置新引用。您在组件的主要范围内执行此操作。
请记住,更改 ref 上的 current
值不会导致重新渲染。我想你想在这里使用状态。将 ref 值视为存储所需数据的位置,但在更改时不应导致 UI 刷新。
如果您需要,我可以解释更多...如果您有任何问题,请告诉我。
嗨,我正在尝试开发一个使用 ref 的程序。
let cardsRef = useRef([]);
我正在 useEffect 中创建 ref。
useEffect(() => {
cardsRef.current = cards.map((_ref, index) => {
return cardsRef.current[index] = createRef();
});
setInitialize(true);
}, [cards, isShuffled]);
return (
{cards.map(item => {
return (
<div key={item.id} ref={cardsRef.current[item.id]}>
{item.value}
</div>
);
})}
)
但是当我在
中更改卡片数组时 const shuffleArray = (array) => {
let tempArr = [];
tempArr = array.sort(() => Math.random() - 0.5);
setCards(tempArr);
setIsShuffled(true);
};
React 找不到 cardsRef.current[index].current。 因为 shuffleArray 函数重置 cardsRef 数组?我猜。
感谢您的帮助。
所以这里有一些需要注意的地方...
createRef
仅在 class 组件中使用。它是您在顶部使用的useRef
的 class 等价物。您不应尝试在效果挂钩内设置新引用。您在组件的主要范围内执行此操作。
请记住,更改 ref 上的
current
值不会导致重新渲染。我想你想在这里使用状态。将 ref 值视为存储所需数据的位置,但在更改时不应导致 UI 刷新。
如果您需要,我可以解释更多...如果您有任何问题,请告诉我。