如何避免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 大于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;