问题描述
我正在尝试从 firebase 加载一些图像,并让它们与机车滚动反应模块一起水平滚动。但是,每当我添加下面的 useEffect 部分来初始化机车滚动时,我都会收到以下错误:
我遵循了 LocomotiveScroll 网站和 GitHub 页面上的所有说明,也查看了其他示例,但似乎无法弄清楚。或者我可能错过了什么。
import React,{ useEffect } from "react";
import useFirestore from "../../Hooks/useFirestore";
import "./Astro.css";
import LocomotiveScroll from "locomotive-scroll";
//<a class="gallery__item-link">explore</a>
const Astro = (props) => {
const { docs } = useFirestore("astro");
let i = 1;
const scrollReff = React.createRef();
useEffect(() => {
const scroll = new LocomotiveScroll({
el: scrollReff.current,smooth: true,direction: "horizontal"
});
});
return (
<div>
{docs &&
docs.map((doc) => (
<div key={doc.id}>
<div ref={scrollReff}>
<div className="content">
<div className="gallery">
<figure className="gallery__item">
<div className="gallery__item-img">
<div class="gallery__item-img">
<div
class="gallery__item-imginner"
>
<img src={doc.url} alt={doc.description} />
</div>
</div>
</div>
<figcaption className="gallery__item-caption">
<h2
className="gallery__item-title"
data-scroll
data-scroll-speed="1"
>
{doc.title}
</h2>
<span className="gallery__item-number">{"0" + i++}</span>
</figcaption>
</figure>
</div>
</div>
</div>
</div>
))}
</div>
);
};
export default Astro;
解决方法
React.createRef() 是异步的,因此如果您尝试在 useEffect
中访问它,它将返回 null
。这意味着当您在 scrollRef.current
内部调用 useEffect
时,您尚未为其分配任何实际实例。
在我看来,您需要添加一个条件,因为此问题与异步有关。 在 useEffect 中,当此变量不存在时,您正在使用 scrollReff。为什么?因为在渲染中,您正在调节文档是否存在。如果你了解 useEffect 是如何工作的,你就会明白第一个渲染 useEffect 是找不到这个变量。
const Astro = (props) => {
...
useEffect(() => {
if(!docs) return;
const scroll = new LocomotiveScroll({
...
});
});