时间戳

首页 > 解决方案 > 类型错误：counters.forEach 不是函数

javascript - 类型错误：counters.forEach 不是函数

问题描述

我想用 js DOM 增加值，但是当我尝试运行我的代码时，它会向我显示如下错误：

   5 | const Counter = () => {
   6 |   useEffect(() => {
   7 |     const counters = document.querySelector(".counter");
>  8 |     counters.forEach((counter) => {
   9 |       counter.innerText = "0";
  10 |       const updateCounter = () => {
  11 |         const target = +counter.getAttribute("data-target");

TypeError: counter.forEach is not a function.

我不知道为什么这会显示这样的错误。

我试过以下代码：

import React, { useEffect } from "react";
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
import { faLaptop } from "@fortawesome/free-solid-svg-icons";

const Counter = () => {
  useEffect(() => {
    const counters = document.querySelector(".counter");
    counters.forEach((counter) => {
      counter.innerText = "0";
      const updateCounter = () => {
        const target = +counter.getAttribute("data-target");
        const c = +counter.innerText;
        const increment = target / 200;

        if (c < target) {
          counter.innerText = `${Math.ceil(c + increment)}`;
          setTimeout(updateCounter, 1);
        } else {
          counter.innerText = target;
        }
      };
      updateCounter();
    });
  }, []);

  return (
    <div className="cus_counter">
      <div className="counter-container">
        <i>
          <FontAwesomeIcon icon={faLaptop} />
        </i>
        <div className="counter" data-target="12000"></div>
        <span>Twitter Followers</span>
      </div>

      <div className="counter-container">
        <i>
          <FontAwesomeIcon icon={faLaptop} />
        </i>
        <div className="counter" data-target="5000"></div>
        <span>Twitter Followers</span>
      </div>

      <div className="counter-container">
        <i>
          <FontAwesomeIcon icon={faLaptop} />
        </i>
        <div className="counter" data-target="1000"></div>
        <span>Twitter Followers</span>
      </div>
    </div>
  );
};

export default Counter;

如果我不使用 useEffect，它仍然会显示错误。

请有任何建议。

标签： javascripthtmlreactjsdom

解决方案

该querySelector方法返回与文档中指定的 CSS 选择器匹配的第一个元素。该方法forEach仅适用于数组。你应该querySelectorAll在这种情况下使用。

顺便说一句，在使用 React 时，最好使用useRef钩子来引用您的元素。如果您想了解更多信息：https ://reactjs.org/docs/hooks-reference.html#useref

推荐阅读