如何避免 UseEffect 中的第一个默认效果

Question

我已经实现了点击按钮时会出现警报的功能 you have clicked 但是这个警报出现在第一次渲染中。我不想那样。我想在计数为 1 和向前时开始提醒。你们能帮我解决这个问题吗？

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

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    alert(`item clicked ${num} times`)
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;

Answer 1

您可以使用 if-statement.

简单地检查 num

如果 num 大于 zero，则显示警报，否则不显示。

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

function Demo() {
  const [num, setNum] = useState(0)

  const change = () => {
    setNum(num + 1)
  }

  useEffect(() => {
    if (num > 0) alert(`item clicked ${num} times`)
  }, [num])

  return(
    <div>
      <h1>{num}</h1>
      <button onClick={change}>Count</button>
    </div>
  )
}

export default Demo;

如何避免 UseEffect 中的第一个默认效果

how to avoid first default effect in UseEffect

render

reactjs

use-effect