如何解决React Ref 对象在第二次调用后自行重置
嗨,我正在尝试开发一个使用 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 找不到 cardRef.current[index].current。 因为 shuffleArray 函数会重置 cardRef 数组?我猜。
感谢您的帮助。
解决方法
所以这里有一些注意事项...
-
createRef
仅用于类组件。它是useRef
的等价类,您在顶部使用过。 -
您不应该尝试在效果挂钩内设置新的引用。您在组件的主要范围内执行此操作。
-
请记住,更改 ref 上的
current
值不会导致重新渲染。我认为你想在这里使用 state 。将 ref 值视为存储所需数据的位置,但不应在 UI 更改时导致刷新。
如果您需要,我可以解释更多...如果您有任何问题,请告诉我。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。