如何解决React ref 不会在异步集上更新
谁能告诉我为什么 ref 在初始渲染时没有更新?
我在最后一项上有条件地设置 ref,如果我不将值设置为异步,它可以正常工作。
const [values,setValues] = useState<Array<Number>>([]);
const ref = useRef(null);
useEffect(() => {
console.log(ref.current);
},[ref]);
useEffect(() => {
setTimeout(() => {
const newValues = Array(10)
.fill(0)
.map((item) => Math.random());
setValues(newValues);
},1000);
},[]);
return (
<div className="App">
{values.map((value,index) => {
const isLast = index === values.length - 1;
return (
<div key={value.toString()} {...(isLast && { ref: ref })}>
{value}
</div>
);
})}
</div>
);
解决方法
当您填充 ref
异步时,您没有看到 useEffect withth dependency as values
执行的原因是因为 ref 实例保持不变,但 ref 对象中的当前键被修改。
如果您跟踪 ref.current
,您将看到 useEffect
被执行。
useEffect(() => {
console.log(ref.current);
},[ref.current]);
然而,这不是正确的方法,因为 ref 的变化不会触发重新渲染,而 useEffect
被称为 post 重新渲染。您应该依赖作为 useEffect 依赖项的是值的更改,这实质上会导致 ref 更改
useEffect(() => {
console.log(ref.current);
},[values]);
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。