如何更新函数定义使默认值始终关联最新React状态变量

函数的默认参数是在函数定义时求值绑定的，当inputFormData状态更新后，如果buttonOnClick函数的引用没有同步更新（比如被缓存或传递给未重渲染的子组件），它的默认参数会一直是旧的状态值，无法同步最新数据。

方案1：将默认值逻辑移到函数内部（最直接） #

移除参数的默认值定义，在函数内部直接使用最新的inputFormData作为 fallback，这样无论函数何时被调用，都能拿到当前最新的状态：

import {isObjectEmpty} from './utils'
import { useState } from 'react';

const App= React.memo((props) => {
  const [inputFormData, setInputFormData] = useState({});
  const [showFillFormModal, setShowFillFormModal] = useState(false);

  function buttonOnClick(eventId, data, formdata) {    
    // 内部使用最新的inputFormData作为默认值
    const currentFormData = formdata ?? inputFormData;
    if (isObjectEmpty(currentFormData)) {
      setShowFillFormModal(true);
      return;
    }
    // 其他业务逻辑...
  }

  return (
    <div className="App">
      <span> Rendered </span>
      <ChildComponent onClick={buttonOnClick} />
    </div>
  );
})

export default App;

方案2：用useCallback绑定依赖，更新函数引用 #

如果需要将buttonOnClick传递给子组件，用useCallback包裹函数，并把inputFormData作为依赖。这样每次状态更新时，函数会重新生成，确保子组件拿到的是绑定了最新默认值的函数：

import {isObjectEmpty} from './utils'
import { useState, useCallback } from 'react';

const App= React.memo((props) => {
  const [inputFormData, setInputFormData] = useState({});
  const [showFillFormModal, setShowFillFormModal] = useState(false);

  const buttonOnClick = useCallback((eventId, data, formdata = inputFormData) => {    
    if (isObjectEmpty(formdata)) {
      setShowFillFormModal(true);
      return;
    }
    // 其他业务逻辑...
  }, [inputFormData]); // 依赖inputFormData，状态更新时函数重新生成

  return (
    <div className="App">
      <span> Rendered </span>
      <ChildComponent onClick={buttonOnClick} />
    </div>
  );
})

export default App;

方案3：用useRef保存最新状态（适合需要稳定函数引用的场景） #

如果不想每次状态更新都重新创建函数，用useRef同步最新的inputFormData，函数内部通过ref.current获取最新值，同时保持函数引用稳定：

import {isObjectEmpty} from './utils'
import { useState, useRef, useEffect, useCallback } from 'react';

const App= React.memo((props) => {
  const [inputFormData, setInputFormData] = useState({});
  const [showFillFormModal, setShowFillFormModal] = useState(false);
  const formDataRef = useRef(inputFormData);

  // 同步最新状态到ref
  useEffect(() => {
    formDataRef.current = inputFormData;
  }, [inputFormData]);

  const buttonOnClick = useCallback((eventId, data, formdata) => {    
    const currentFormData = formdata ?? formDataRef.current;
    if (isObjectEmpty(currentFormData)) {
      setShowFillFormModal(true);
      return;
    }
    // 其他业务逻辑...
  }, []); // 空依赖，函数引用保持稳定

  return (
    <div className="App">
      <span> Rendered </span>
      <ChildComponent onClick={buttonOnClick} />
    </div>
  );
})

export default App;

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