Javascript TypeError:无法读取属性'；远视'；使用机车滚动反应模块时为空

我正在尝试从firebase加载一些图像，并让它们与机车滚动模块水平滚动。但是，每当我在下面添加useEffect部分以初始化机车滚动时，我都会出现以下错误：

我遵循了MotorveScroll网站和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;

import React，{useffect}来自“React”；
从“../../Hooks/useFirestore”导入useFirestore；
导入“/Astro.css”；
从“机车卷轴”导入机车卷轴；
//探索
常量天文=（道具）=>{
const{docs}=useFirestore（“astro”）；
设i=1；
const scrollReff=React.createRef（）；
useffect（（）=>{
const scroll=新机车滚动({
el:scrollReff.current，
平滑：是的，
方向：“水平”
});
});
返回(
{docs&&
docs.map（（doc）=>(
{doc.title}
{“0”+i++}
))}
);
};
导出默认Astro；

React.createRef（）是异步的，因此如果您尝试在

useffect

中访问它，它将返回

null

。这意味着在您调用

scrollRef.current

内部

useffect

的那一刻，您还没有为它分配任何实际实例。

因此，我在没有使用效果挂钩的情况下尝试了它，但它仍然存在相同的问题。我这样做是因为火车头卷轴文件就是这么说的。我尝试的另一种方法是这样的：const lscroll=newmotorvescroll（{el:document.querySelector（'[datascrollcontainer]'），smooth:true，direction:'horizontal'}）；如果没有react.createRef，很抱歉，我只知道为什么您的代码会产生您提到的错误，因为我使用react进行了exp。我没用过MomotiveScroll，所以我没有你需要的答案。