在useState钩子的setState方法中调用函数的正确方式是什么

你的代码报错是因为语法不符合React状态更新的调用规则，你给setDetails传入了两层嵌套的箭头函数，这是无效的语法结构。

场景1：不需要等状态更新完成，同步执行updateStatus #

如果你不需要依赖更新完成后的最新details状态来执行updateStatus，直接把两个操作放在同一个点击回调里即可：

onClick={() => {
  setDetails(prevState => ({
    ...prevState,
    id: product.orderId,
    status: 'processing'
  }))
  updateStatus()
}}

场景2：需要等details状态更新完成后才执行updateStatus #

如果你使用的是函数组件的useState，状态更新的setter方法本身不支持直接传入回调函数，你需要配合useEffect监听details的变化来触发后续操作：

1. 点击事件只做状态更新：

onClick={() => setDetails(prevState => ({
  ...prevState,
  id: product.orderId,
  status: 'processing'
}))}

2. 组件内添加副作用监听：

import { useEffect } from 'react'

// 组件内部添加如下代码
useEffect(() => {
  // 可根据实际业务加判断条件，避免不必要的执行
  if (details.status === 'processing' && details.id) {
    updateStatus()
  }
}, [details])

如果你使用的是类组件的setState方法，可以直接把回调作为第二个参数传入：

onClick={() => {
  this.setState(prevState => ({
    ...prevState.details,
    id: product.orderId,
    status: 'processing'
  }), () => {
    this.updateStatus()
  })
}}

内容的提问来源于stack exchange，提问作者Kamlesh sharma