React中setState完成后执行函数的规范方法（非初始渲染）

针对你遇到的问题，有两种可行的规范方案，都能避免依赖useEffect监听所有value变化：

方案1：直接传递计算后的新值（最推荐） #

既然你能提前计算出value的新值（value + 1），完全可以直接把这个新值传给apiRequest，不用等状态更新。这种方式最简单高效，也避免了依赖异步的state更新：

const TestComponent = () => {
  const [value, setValue] = useState(null)

  // 修改apiRequest，接收传入的当前值
  const apiRequest = async (currentValue) => {
    const reply = await fetch(`/api/${currentValue}`)
    const response = await reply.json()
    console.log(response)
  }

  const handleClick = async () => {
    const newValue = value + 1;
    setValue(newValue);
    // 直接传递新值给apiRequest
    apiRequest(newValue);
  }

  return (
    <>
      <button onClick={handleClick}>Call API</button>
    </>
  )
}

方案2：使用setState的回调函数 #

如果新值无法提前计算（比如依赖之前的state进行复杂逻辑处理），可以利用useState setter的回调模式，在回调里拿到更新后的state并执行apiRequest：

const TestComponent = () => {
  const [value, setValue] = useState(null)

  const apiRequest = async (currentValue) => {
    const reply = await fetch(`/api/${currentValue}`)
    const response = await reply.json()
    console.log(response)
  }

  const handleClick = async () => {
    // 用回调式setState获取前一次state，计算新值后执行apiRequest
    setValue(prevValue => {
      const newValue = prevValue + 1;
      apiRequest(newValue);
      return newValue;
    });
  }

  return (
    <>
      <button onClick={handleClick}>Call API</button>
    </>
  )
}

为什么原代码会失效？ #

useState的setter函数是异步批量更新的，调用setValue后，value不会立即更新为新值。所以你紧接着调用apiRequest(value)时，拿到的还是更新前的旧state。

为什么不用useEffect？ #

正如你所说，useEffect(() => { apiRequest(value) }, [value])会监听所有value的变化，只要value更新就会执行api请求，无法区分是点击按钮触发的更新，还是其他逻辑触发的更新，不符合你的需求。

内容的提问来源于stack exchange，提问作者0lafe