我的React简单计数器不像预期的那样工作

Question

我开始学习React，我想知道为什么我的计数器不能工作:(我的目标是:当您按下按钮时，计数器函数在td中开始“计数”并呈现“计数”状态。我不知道我做错了什么。

import React, { useState } from "react";


function Clock() {
  const customStyle = {
    fontSize: "100px"
  };
  const tdStyle = "px-3 border border-dark border-3 rounded bg-secondary";
  //-------------------------------------------------------------------------
// THIS FUNCTION 
  const [count, setCount] = useState(0);

  function Counter(){
    setCount(count + 1)
    setInterval(Counter, 1000)
  }  
 

  return (
    <div className="rounded border border-dark border-3">
      <table>
        <tr style={customStyle}>
          <td className={tdStyle}>
            <i className="fa-solid fa-clock"></i>
          </td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>{count}</td>    //here is showed
        </tr>
      </table>
      <button onClick={Counter}>Pulsar</button>    //button
    </div>
  );
}

export default Clock;

这在真正的秒内有效。

function Counter(){
    setCount(new Date().getSeconds())
    setInterval(Counter, 1000)
  }

但这不是我想要的。我想要一个简单的柜台。

此外，如何在这段代码中使用"onLoad“事件？因为当页面被加载时，它开始在页面中计数和呈现它？

提前谢谢你！！

Answer 1

首先，您需要将您的setInterval放在useEffect挂钩中，因为您当前每次状态更新时都会创建一个新的间隔(即每秒钟更新一次)，这将大大降低应用程序的速度。其次，您应该使用useEffect清理函数来删除每次组件重新呈现时的间隔，以防止重复的间隔创建。最后，考虑到状态依赖于以前的状态快照(即前一个计数值)，您应该使用回调更新状态(以确保访问最新的状态快照)。

useEffect(() => {

  function counter(){
    setCount(prevState => prevState + 1)
  }

  let countInterval = setInterval(counter, 1000)

  return () => clearInterval(countInterval)

}, [])

考虑到每次计数更新时都要调用useEffect，您可以(而且可能应该)使用setTimeout而不是setInterval。在这种情况下，不需要清理函数。

Answer 2

如果我理解useState是如何正确工作的，我相信您在计数状态中遇到了一些异步问题，这将解释为什么您的“真正秒”示例能够工作。

我建议将setInterval()函数移动到useEffect挂钩。useEffect钩子也将回答您的onLoad问题。

import React, { useState, useEffect } from "react";


function Clock() {
  const customStyle = {
    fontSize: "100px"
  };
  const tdStyle = "px-3 border border-dark border-3 rounded bg-secondary";
  //-------------------------------------------------------------------------
// THIS FUNCTION 
  const [count, setCount] = useState(0);

useEffect(() => {
  setInterval(counter, 1000);
}, []);

  function Counter(){
    setCount(count + 1)
  }  
 

  return (
    <div className="rounded border border-dark border-3">
      <table>
        <tr style={customStyle}>
          <td className={tdStyle}>
            <i className="fa-solid fa-clock"></i>
          </td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>0</td>
          <td className={tdStyle}>{count}</td>    //here is showed
        </tr>
      </table>
      <button onClick={Counter}>Pulsar</button>    //button
    </div>
  );
}

export default Clock;

我不是100%的阳性，这将工作的预期，因为我不能测试它在这个时刻，但我相信这是你正在寻找的。下面也是关于useEffect的文档，https://reactjs.org/docs/hooks-effect.html