react/javascript - 类型错误：无法读取 null 的属性“classList”答案

【问题标题】：react/javascript - TypeError: Cannot read property 'classList' of nullreact/javascript - 类型错误：无法读取 null 的属性“classList”
【发布时间】：2021-01-15 14:21:58
【问题描述】：

使用 React，我有一个固定的导航购物车图标，该图标会在滚动时更改，并带有指向购物车页面/组件的链接。每当我单击该图标时，它都会导航到该页面，但片刻后会出现错误-TypeError：无法读取null的属性'classList'。购物车页面只有一个“开发中...”的 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);

【问题讨论】：

你没有正确“反应”； isTop 应该是组件状态的一部分，并且在您的 JSX 中，应该根据其值动态添加该类。（错误是由您的 fixed.classList 行引起的，当 fixed 为空时运行）

标签： javascript reactjs use-effect

【解决方案1】：

如果您希望它在没有错误的情况下工作，您应该从 useEffect 返回一个清理函数以取消附加添加的事件侦听器：

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);
  }
}, []);

但最好使用状态而不是通过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'}`}>

【讨论】：

【解决方案2】：

感谢两位评论者，真的应该从一开始就修改状态。尽管修复了初始错误，但评论者代码并未更改滚动图标。这是我想出的解决方案。

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"}`}>

【讨论】：