Jotai 中如何正确监听 atom 值的变化？

端木诗诗提问于 2026-03-13 20:26:22 阅读 2

框架

我在用 Jotai 管理状态，想在某个 atom 的值变化时执行副作用（比如发请求），但 useEffect 里监听 atom 总是拿不到最新值，或者触发多次。我试过直接把 atom 放进依赖数组，也试过用 useAtomValue，都不太对。

比如下面这段代码，每次 count 变化时我都想打印出来，但实际没反应：

import { useAtom, atom } from 'jotai'

const countAtom = atom(0)

function MyComponent() {
  const [count] = useAtom(countAtom)
  
  useEffect(() => {
    console.log('count changed:', count)
  }, [countAtom]) // 这里是不是写错了？
  
  return <div>{count}</div>
}

我来解答赞 1 收藏

反馈

1 条解答

IT人筱萌 Lv1

兄弟，你这个依赖数组写错了。useEffect 的第二个参数应该是具体要监听的变量，你放 countAtom 进去那肯定不行啊，React 又不知道你要监听 atom 的什么。

正确写法是这样的：

import { useAtom } from 'jotai'



const countAtom = atom(0)



function MyComponent() {

  const [count, setCount] = useAtom(countAtom)

  

  useEffect(() => {

    console.log('count changed:', count)

  }, [count]) // 监听 count 这个值本身

  

  return  setCount(c => c + 1)}>{count}


}

把 [countAtom] 改成 [count] 就对了，useEffect 会监听 count 的变化，变化时执行回调。

如果你用的是 useAtomValue（只读不写），写法也一样：

import { useAtomValue } from 'jotai'

import { useEffect } from 'react'



const countAtom = atom(0)



function MyComponent() {

  const count = useAtomValue(countAtom)

  

  useEffect(() => {

    console.log('count changed:', count)

  }, [count])

  

  return {count}


}

另外提醒一下，useEffect 在组件挂载时也会执行一次，如果只想在更新时执行，可以加个 ref 判断：

const isMounted = useRef(false)



useEffect(() => {

  if (!isMounted.current) {

    isMounted.current = true

    return

  }

  console.log('count changed:', count)

}, [count])

这样就只在 count 变化时打印了。

2026-03-13 21:02