类型错误：counters.forEach 不是 function [重复]

Question

这个问题在这里已经有了答案：

不能在 querySelector 上使用 forEach 4 个答案

5 个月前关闭。

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

请有任何建议。

Answer 1

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

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

Answer 2

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

Answer 3

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