React 调用父组件传递的setState后state未更新如何解决

• React的setState是异步批量更新的，你在调用setCheck(res)后立即打印check，获取到的是当前渲染周期闭包内的旧值，属于框架的正常设计，不能以此判定状态更新失败。
• 若父组件内也始终获取到空数组，按以下顺序排查：
  1. 检查透传属性名是否匹配：确认父组件传递给子组件的属性名和子组件接收的属性名完全一致，避免出现父组件传setCheckList，子组件接收setCheck这类拼写错误。
  2. 确认接口返回值合法：在setCheck(res)前打印res的值，确认接口返回的结果不是空数组。
  3. 排查状态被覆盖的可能：如果项目开启了严格模式，检查父组件是否有useEffect等逻辑在状态更新后又将其重置为空数组。
  4. 检查React.memo相关问题：如果子组件被React.memo包裹，确认透传的setCheck没有被额外用箭头函数包装，避免函数引用频繁变化导致逻辑异常。

调试参考代码 #

const { check, setCheck } = props // receive from props
const callApi = async (onEnter) => {
  const res = await callFunction('', data)
  console.log('接口返回结果：', res) // 优先确认res是否符合预期
  if (res) {
    setResults(res)
    if (onEnter) {
      setCheck(res)
    }
  }
}

// 单独监听check的更新结果
useEffect(() => {
  console.log('check更新后的值：', check)
}, [check])

父组件侧也建议通过useEffect监听对应状态的变化，不要直接在渲染函数内打印，避免拿到旧闭包的错误值。

内容的提问来源于stack exchange，提问作者james wisley