仅使用 React Hooks；单击按钮 1 秒后增加和减少计数异步

问题描述

--2 异步递增和递减计数的按钮（例如：点击后1s，然后递增计数）-- 我试过但无法做到，所以任何人都可以请你帮助我。如何随机生成这个异步计数并在每次点击1秒后实现这个按钮，同时递增和递减。

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

const Counter = () => {
  const [count,setCount] = useState(0);
  /*const [seconds,setSeconds] = useState(0);
  
  ////// to Set timeout//////
  useEffect(() => {
    const interval = setInterval(() => {
      setSeconds((seconds) => seconds + 1);
    },1000);
    return () => interval;
  },[]);
  */

  const synincrement = () => {
    setCount(count + 1);
  };

  const syndecrement = () => {
    setCount(count - 1);
  };
  const incrementAsync = () => {
    /*setInterval(() => {
      setSeconds((seconds) => seconds + 1);
    });
    //////// tried to implement 1sec after the click,then increment the count but need a teacher assistant for asynchronous/////////
    */
    setCount(count + 5);
  };
  

  const decrementAsync = () => {
    setCount(count -8);
  };

  return (
    <div style={{ display: "flex",justifyContent: "center" }}>
      <div>
        <h2>This is Counter App</h2>
        <p style={{ fontSize: 50 }}>{count}</p>
        <button
          onClick={synincrement}
          style={{ fontsize: 30,marginRight: 10,padding: 10 >SynIncrement</button>
        <button
          onClick={syndecrement}
          style={{ fontsize: 30,padding: 10 }}>SynDecreme</button>
        <div>

            <button
              onClick={incrementAsync}
              style={{
                fontsize: 30,padding: 10,marginTop: 10,}}>AsynIncremen</button>
    <button onClick={decrementAsync}
              style={{
                fontsize: 30,}}
            >
              AsynDecrement
            </button>
          </div>
      </div>
    </div>
  );
};

export default Counter;

解决方法

顺便提一下@HelloWorld 的好用户名。 我已经回答了你的问题。有 3 件事。

1. 为了便于理解，我对您的代码进行了美化处理。
2. 删除了不需要的评论
3. 此实现不需要 useEffect
4. 您需要使用 setTimeout 而不是 setInterval
5. setCounter 将函数而不是状态作为参数，因为它需要在 1 秒后具有最新的计数器值。否则，它将包含调用 setTimeout 时的计数器状态值。

代码如下：

import React,{ useState } from "react";

const incrementPeriod = 1000 // in millisecond
const decrementPeriod = 1000 // in millisecond

const Counter = () => {
  const [count,setCount] = useState(0);

  const synincrement = () => {
    setCount(count => count + 1);
  };

  const syndecrement = () => {
    setCount(count => count - 1);
  };
  const incrementAsync = () => {
        setTimeout(() => {
            setCount(count => count + 1);
        },incrementPeriod)
  };

  const decrementAsync = () => {
        setTimeout(() => {
            setCount(count => count - 1);
        },decrementPeriod)
  };

  return (
    <div style={{ display: "flex",justifyContent: "center" }}>
      <div>
        <h2>This is Counter App</h2>
        <p style={{ fontSize: 50 }}>{count}</p>
        <button
          onClick={synincrement}
          style={{ fontsize: 30,marginRight: 10,padding: 10 }}
        >
          SynIncrement
        </button>
        <button
          onClick={syndecrement}
          style={{ fontsize: 30,padding: 10 }}
        >
          SynDecreme
        </button>
        <div>
          <button
            onClick={incrementAsync}
            style={{
              fontsize: 30,padding: 10,marginTop: 10,}}
          >
            Async Increment
          </button>
          <button
            onClick={decrementAsync}
            style={{
              fontsize: 30,}}
          >
            Async Decrement
          </button>
        </div>
      </div>
    </div>
  );
};

export default Counter;