如何让useEffect仅在状态变化时执行而非组件挂载时？

你遇到的问题根源在于JavaScript中对象的引用比较机制：currentTarget !== {}这个判断永远会返回true，哪怕currentTarget是默认的空对象。因为两个空对象是不同的内存引用，不是同一个对象，所以条件会成立，导致组件挂载时就执行了里面的逻辑。

解决方法有两种： #

方法1：检查空对象的实际内容

通过判断对象的键数量来确定是否是有意义的目标对象，默认空对象的键长度为0，当状态更新为包含_id的有效对象时，键长度大于0：

useEffect(() => {
  if (Object.keys(currentTarget).length > 0) {
    console.log(currentTarget)
    fetchChat()
  }
}, [currentTarget])

方法2：修改状态默认值为null

把currentTarget的默认值从空对象改成null，这样直接判断是否不等于null即可，挂载时currentTarget为null，不会触发逻辑，只有当状态更新为有效对象时才执行：

// 先修改状态初始化
const [currentTarget, setCurrentTarget] = useState(null);

// 再修改useEffect判断
useEffect(() => {
  if (currentTarget !== null) {
    console.log(currentTarget)
    fetchChat()
  }
}, [currentTarget])

这两种方法都能实现你要的效果：仅在currentTarget状态从默认值变为有效对象时执行逻辑，组件挂载时不会触发。

内容的提问来源于stack exchange，提问作者Romeo Richardson