状态更新未即时生效？如何配置useEffect依赖数组实现变更渲染且避免死循环

• 异步执行顺序错误：getmyUser 是异步接口请求，你没有等待请求返回就直接执行了 populateJobs，此时 user 还是初始空对象，user.saved 不存在，匹配liked属性的逻辑根本不会生效，所以你以为的数组更新实际并没有正确加上liked标记。
• 闭包陷阱：当前useEffect依赖是空数组，Effect内部捕获的永远是首次渲染的jobs和user初始值，就算后续这两个值更新，Effect内部也拿不到最新值，自然无法正确处理数据。
• 对象引用未更新：你只对jobs数组做了浅拷贝，数组内的job对象还是复用原有引用，直接修改myjobs[i].liked属于修改原对象，部分依赖对象引用的渲染逻辑可能检测不到变化。
• 无限循环原因：如果把jobs加入依赖数组，Effect内部执行setJobs会更新context里的jobs，触发组件重渲染后又会再次执行Effect，反复调用setJobs就形成了死循环。

不用修改全局context的jobs状态，直接在当前组件派生带liked标记的作业列表，从根源避免状态修改冲突：

const state = useContext(GlobalState)
const [jobs] = state.categoriesAPI.jobs
const [user, setUser] = useState({})

// 挂载时拉取用户数据
useEffect(() => {
  const getmyUser = async () => {
    const {data: user} = await http.get(MyApiUrl + '/api/users/job')
    setUser(user)
  }
  getmyUser()
}, [])

// 派生带liked标记的作业列表，依赖jobs和user自动更新
const processedJobs = useMemo(() => {
  if (!user?.saved || !Array.isArray(jobs)) return jobs || []
  return jobs.map(job => {
    // 匹配到收藏的作业时返回新对象，更新引用触发渲染
    if (_.includes(user.saved, job._id)) {
      return {...job, liked: true}
    }
    return job
  })
}, [jobs, user])

后续渲染直接使用processedJobs即可，不需要调用setJobs，自然不会出现死循环问题，状态更新后也能即时触发重渲染。

可以在更新前加判断逻辑，避免重复更新触发死循环：

const state = useContext(GlobalState)
const [jobs, setJobs] = state.categoriesAPI.jobs
const [user, setUser] = useState({})

// 拉取用户数据
useEffect(() => {
  const getmyUser = async () => {
    const {data: user} = await http.get(MyApiUrl + '/api/users/job')
    setUser(user)
  }
  getmyUser()
}, [])

// 处理jobs标记
useEffect(() => {
  // 没有用户数据、jobs为空、已经处理过liked属性时都不执行
  if (!user?.saved || !Array.isArray(jobs) || jobs.length === 0) return
  const isProcessed = jobs.some(job => 'liked' in job)
  if (isProcessed) return

  const populateJobs = () => {
    const newJobs = jobs.map(job => {
      if (_.includes(user.saved, job._id)) {
        return {...job, liked: true}
      }
      return job
    })
    setJobs(newJobs)
  }

  populateJobs()
}, [jobs, user, setJobs])

内容的提问来源于stack exchange，提问作者Spark Ignite