react/javascript-TypeError:无法读取属性'；类列表'；空的

使用React，我有一个固定的导航车图标，可以在滚动条上更改，并带有指向购物车页面/组件的链接。每当我点击图标时，它就会导航到页面，但过了一会儿就会出现错误-TypeError:cannotread属性'classList'为null。购物车页面只有一个“正在开发…”div，没有样式

我找到了问题的症结所在；UseEffect中的一个getNumbers（）redux函数，它只会在添加项目时增加图标中的购物车数量。如果我注释掉这个函数，错误就会消失。在单独的useEffect中尝试了该功能，但没有成功

我不明白为什么购物车页面要从一个单独的组件解析一个图标，更不用说如何在不返回类的情况下解决这个问题了

有人知道解决办法吗

const Homepage = (props) => {
    console.log(props);
    useEffect(() => {
        window.addEventListener("scroll", () => {
            const isTop = window.scrollY > 700;
            const fixed = document.getElementById("fixed");

            if (isTop) {
                fixed.classList.remove("disappear");
            } else {
                fixed.classList.add("disappear");
            }
        });
        getNumbers();
    }, []);

    return (
        <div className='Homepage'>
            <div className='Homepage-nav' id='fixed'>
                <Link to='/basket'>
                    <i className='fas fa-shopping-cart'>
                        <span
                            style={{
                                fontSize: "1rem",
                                paddingLeft: ".25rem"
                            }}
                        >
                            {props.basketProps.basketNumbers}
                        </span>
                    </i>
                </Link>
            </div>
            <Hero />
            <Shop />
            <Footer />
        </div>
    );
};

const mapStateToProps = (state) => ({
    basketProps: state.basketState
});

export default connect(
    mapStateToProps,
    { getNumbers }
)(Homepage);

const主页=（道具）=>{
控制台日志（道具）；
useffect（（）=>{
window.addEventListener（“滚动”，（）=>{
const isTop=window.scrollY>700；
const fixed=document.getElementById（“fixed”）；
如果（isTop）{
固定.classList.remove（“消失”）；
}否则{
固定.classList.add（“消失”）；
}
});
getNumbers（）；
}, []);
返回(
{道具。篮球道具。篮球号码}
);
};
常量mapStateToProps=（状态）=>({
篮球道具：state.basketState
});
导出默认连接(
MapStateTops，
{getNumbers}
)（主页）；

如果希望此功能正常工作而不出现错误，则应从

useffect

返回一个清理函数，以解除附加的事件侦听器：

const scrollListener = () => {
  const isTop = window.scrollY > 700;
  const fixed = document.getElementById("fixed");
  if (isTop) {
      fixed.classList.remove("disappear");
  } else {
      fixed.classList.add("disappear");
  }
  getNumbers();
};

});
useEffect(() => {
  window.addEventListener("scroll", scrollListener);
  return () => {
    window.removeEventListener("scroll", scrollListener);
  }
}, []);

但是最好使用state，而不是通过

querySelector

对DOM进行变异。在React中，只有在无法通过React本身执行操作时，才能直接变异元素：

const Homepage = (props) => {
    const [isTop, setIsTop] = useState(false);
    const listener = () => {
        setIsTop(window.scrollY > 700);
        // getNumbers();
    };
    useEffect(() => {
        window.addEventListener("scroll", () => listener);
        return () => window.removeEventListener("scroll", () => listener);
    }, []);

    return (
        <div className={`Homepage-nav ${isTop ? '' : 'disappear'}`}>

const主页=（道具）=>{
const[isTop，setIsTop]=useState（false）；
常量侦听器=（）=>{
setIsTop（window.scrollY>700）；
//getNumbers（）；
};
useffect（（）=>{
addEventListener（“滚动”，（）=>listener）；
return（）=>window.removeEventListener（“滚动”（（）=>listener）；
}, []);
返回(

多亏了这两位评论者，我真的应该从一开始就修改状态。尽管修复了初始错误，评论者代码并没有改变滚动条上的图标。下面是我提出的解决方案

const [isTop, setIsTop] = useState(false);

   const changeFixed = () => {
       if (window.scrollY > 700) {
           setIsTop(true);
       } else {
           setIsTop(false);
       }
   };

   window.addEventListener("scroll", changeFixed); 


<div className={`Homepage-nav ${isTop ? "" : "disappear"}`}>

const[isTop，setIsTop]=useState（false）；
常量changeffixed=（）=>{
如果（window.scrollY>700）{
setIsTop（真）；
}否则{
setIsTop（假）；
}
};
window.addEventListener（“滚动”，changefix）；

您没有正确地“反应”；

isTop

应该是组件状态的一部分，并且在您的JSX中，应该根据其值动态添加类。（错误是由

fixed.classList

行引起的，这些行在

fixed

为空时运行）