在useEffect中设置React state后调用为空（延迟更新）如何解决

问题根因 #

• React的状态更新是异步批量执行的，调用setState后不会立即修改当前作用域下的state变量，只会在下一次组件重渲染时生成新的state快照
• 同一渲染周期内所有代码访问的state都是本次渲染闭包捕获的固定值，无论后续调用多少次setState都不会改变当前周期的state取值

解决方案 #

方案1：直接复用setState传入的原始值 #

如果要使用的新state值就是你调用setState时传入的参数，直接复用该参数即可，无需从state变量读取。

useEffect(() => {
  const getList = async () => {
    const response = await fetch('/api/data')
    const newList = await response.json()
    setList(newList)
    // 直接用刚获取的newList做过滤，无需读取state中的list
    const filteredResult = newList.filter(item => item.type === 'valid')
    // 后续处理过滤结果的逻辑
  }
  getList()
}, [])

方案2：拆分逻辑到独立useEffect监听state变化 #

如果过滤逻辑和setState逻辑不在同一作用域，或者需要在state每次更新时自动重新执行过滤，将过滤逻辑封装到独立useEffect中，把对应state添加到依赖数组即可。

const [list, setList] = useState([])
const [filteredList, setFilteredList] = useState([])

// 负责异步请求更新list
useEffect(() => {
  const getList = async () => {
    const response = await fetch('/api/data')
    setList(await response.json())
  }
  getList()
}, [])

// 负责监听list变化，自动执行过滤
useEffect(() => {
  // 此处读取的list永远是最新更新后的值
  const result = list.filter(item => item.type === 'valid')
  setFilteredList(result)
}, [list])

方案3：用useRef同步存储最新state值（特殊场景使用） #

如果遇到无法拆分逻辑的特殊场景，需要在任意位置随时读取最新state值，可以用useRef同步保存state的最新值。

const [list, setList] = useState([])
const listRef = useRef([])

// 同步list的最新值到ref
useEffect(() => {
  listRef.current = list
}, [list])

useEffect(() => {
  const getList = async () => {
    const response = await fetch('/api/data')
    const newList = await response.json()
    setList(newList)
    // 等待微任务执行完成，确保state更新后读取ref
    await Promise.resolve()
    const filteredResult = listRef.current.filter(item => item.type === 'valid')
    // 后续处理逻辑
  }
  getList()
}, [])

注意：该方案仅作为特殊场景的兜底方案，优先使用前两种方案更符合React的设计范式，可维护性更高。

内容的提问来源于stack exchange，提问作者Puneet Phull