尝试一次获得不同的百分比计数

Question

我试图一次获得不同的计数来制作不同的技能百分比进度条。 This is UI。但它总是给出一个计数，我不知道该怎么做。任何帮助，将不胜感激。提前致谢！

const advantageObj = [
    {
      title: "HTML",
      img: images.htmlIcon,
      count: 50
    },
    {
      title: "Wordpress",
      img: images.wordpress,
      count: 50
    },
    {
      title: "Elementor",
      img: images.elementor,
      count: 50
    },
    {
      title: "Ebay",
      img: images.ebay,
      count: 89
    },
    {
      title: "JavaScript",
      img: images.js,
      count: 50
    },
    {
      title: "CSS",
      img: images.css,
      count: 78
    }
  ]

这是代码。

  var [count, setCount] = useState(0);

  const integer = advantageObj.map(int => int.count);


  useEffect(() => {
    const interval = setInterval(() => {
      for (let i = 0; i < integer.length; i++) {
        if (count < integer[i]) {
          setCount(count + 1);
        }
      };
    }, 50);
    return () => clearInterval(interval);
  }, []);

这是组件的 JSX。

 <div>
      <h1 className="section-title">Advantages</h1>
      <div className="advContainer">
        {advantageObj.map((item, index) =>
          <div key={index} className="advItems">
            <h1>
              <img src={item.img} alt="" />
              <div class="progress-done">
                <span className="progress-count">{count}%</span>
              </div>
              {item.title}
            </h1>
          </div>
        )}
      </div>
    </div>
  )
}

Answer 1

我不确定我是否正确理解你的问题，但我试着回答它。

我认为你的问题是你对所有计数器使用一个状态变量。通过这样做，您的计数器将始终显示相同的百分比值。 尝试为每个计数器提供自己的状态变量。

编辑作为对您答案的回复： 您可以在 advantageObj 中提供状态变量。这样，您还可以映射出状态变量。因此，为每种类型创建一个状态变量，例如const [htmlCount, setHtmlCount] = useState(); 并将其传递给您的 advantageObj。

const [htmlCount, setHtmlCount] = useState();
const [wordpressCount, setWordpressCount] = useState();
const [elementorCount, setElementorCount] = useState();

    const advantageObj = [
        {
          title: "HTML",
          img: images.htmlIcon,
          count: 50,
          stateVar: htmlCount,
        },
        {
          title: "Wordpress",
          img: images.wordpress,
          count: 50,
          stateVar: wordpressCount,
        },
        {
          title: "Elementor",
          img: images.elementor,
          count: 50,
          stateVar: elementorCount,
        },
        ...
      ]

然后在你的 map 函数中，指向那个 stateVar：

<div className="advContainer">
        {advantageObj.map((item, index) =>
          <div key={index} className="advItems">
            <h1>
              <img src={item.img} alt="" />
              <div class="progress-done">
                <span className="progress-count">{item.stateVar}%</span>
              </div>
              {item.title}
            </h1>
          </div>
        )}
      </div>

如果您随后为这些状态变量设置一个新值，则只有一个计数器会发生变化。 :)