如何在state值未变化但被设置时执行useEffect()？

React的useState在设置与当前状态相同的值时，不会触发组件重渲染，因此依赖该state的useEffect也不会执行。以下是几种可行的解决方法：

方案一：使用提交计数器（最直接） #

新增一个专门用于触发更新的计数器，每次提交时递增它，强制触发useEffect：

import { useState, useEffect } from 'react'

const YourComponent = (props: { updateIdRequestType: (data: { requestType: RequestType | undefined, id: string }) => void }) => {
  const [formValue, setFormValue] = useState('')
  const [serialNumber, setSerialNumber] = useState('')
  const [requestType, setRequestType] = useState<RequestType>()
  // 新增触发计数器
  const [submitCount, setSubmitCount] = useState(0)

  const serialNumberSubmitHandler = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault()
    setRequestType(RequestType.SERIAL_NUMBER)
    setFormValue(serialNumber)
    // 每次提交递增计数器，确保触发useEffect
    setSubmitCount(prev => prev + 1)
  }

  useEffect(() => {
    props.updateIdRequestType({ requestType, id: formValue })
  }, [formValue, requestType, submitCount]) // 加入计数器作为依赖

  // 渲染逻辑...
}

说明 #

计数器submitCount每次提交都会变化，无论formValue是否与之前相同，都会强制触发useEffect。同时将requestType加入依赖，确保所有关联状态更新后再执行逻辑。

方案二：抽离逻辑+同步调用（避开异步延迟） #

将useEffect内的逻辑抽离为独立函数，在提交时直接用即将设置的新值调用，同时保留useEffect处理其他场景的状态变更：

import { useState, useEffect, useCallback } from 'react'

const YourComponent = (props: { updateIdRequestType: (data: { requestType: RequestType | undefined, id: string }) => void }) => {
  const [formValue, setFormValue] = useState('')
  const [serialNumber, setSerialNumber] = useState('')
  const [requestType, setRequestType] = useState<RequestType>()

  // 抽离核心逻辑
  const updateRequest = useCallback((type: RequestType | undefined, id: string) => {
    props.updateIdRequestType({ requestType: type, id })
  }, [props.updateIdRequestType])

  const serialNumberSubmitHandler = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault()
    const newType = RequestType.SERIAL_NUMBER
    const newId = serialNumber
    
    setRequestType(newType)
    setFormValue(newId)
    // 直接用新值调用，避开setState的异步延迟
    updateRequest(newType, newId)
  }

  // 保留useEffect处理其他修改状态的场景
  useEffect(() => {
    updateRequest(requestType, formValue)
  }, [requestType, formValue, updateRequest])

  // 渲染逻辑...
}

说明 #

这种方法无需额外状态，直接在提交时使用最新的目标值执行逻辑，同时useEffect仍能处理其他操作（如输入框实时修改）导致的状态变化。

方案三：使用useReducer #

useReducer每次dispatch动作都会生成新的state对象（即使内容与之前一致），因此可以强制触发useEffect：

import { useReducer, useEffect } from 'react'

type RequestType = 'SERIAL_NUMBER'
type State = {
  formValue: string
  serialNumber: string
  requestType: RequestType | undefined
}

type Action = 
  | { type: 'UPDATE_SERIAL_NUMBER', payload: string }
  | { type: 'SUBMIT_SERIAL_NUMBER' }

const initialState: State = {
  formValue: '',
  serialNumber: '',
  requestType: undefined
}

const formReducer = (state: State, action: Action): State => {
  switch (action.type) {
    case 'UPDATE_SERIAL_NUMBER':
      return { ...state, serialNumber: action.payload }
    case 'SUBMIT_SERIAL_NUMBER':
      return {
        ...state,
        requestType: RequestType.SERIAL_NUMBER,
        formValue: state.serialNumber
      }
    default:
      return state
  }
}

const YourComponent = (props: { updateIdRequestType: (data: { requestType: RequestType | undefined, id: string }) => void }) => {
  const [state, dispatch] = useReducer(formReducer, initialState)

  const serialNumberSubmitHandler = (event: React.FormEvent<HTMLFormElement>): void => {
    event.preventDefault()
    dispatch({ type: 'SUBMIT_SERIAL_NUMBER' })
  }

  useEffect(() => {
    props.updateIdRequestType({ requestType: state.requestType, id: state.formValue })
  }, [state, props.updateIdRequestType]) // state引用每次dispatch都会更新

  // 渲染逻辑...
  return (
    <form onSubmit={serialNumberSubmitHandler}>
      <input 
        type="text" 
        value={state.serialNumber} 
        onChange={(e) => dispatch({ type: 'UPDATE_SERIAL_NUMBER', payload: e.target.value })}
      />
      <button type="submit">提交</button>
    </form>
  )
}

说明 #

useReducer的状态更新始终会生成新的state对象，因此useEffect的依赖state每次都会变化，确保提交动作触发后一定会执行逻辑。

内容的提问来源于stack exchange，提问作者Luis Breuer