TypeError: counters.forEach不是一个函数

Question

我想用js来增加值，但是当我试图运行我的代码时，它会显示一个错误，如下所示：

   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，它仍然会显示错误。

有什么建议吗？

Answer 1

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

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

Answer 2

Document方法querySelector()返回与指定选择器或选择器组匹配的文档中的第一个元素。如果没有找到匹配项，则返回null。由于数组没有返回，所以不能使用forEach。

Answer 3

querySelector只选择一个元素。您应该使用querySelectorAll来选择具有给定类的所有元素。