React中如何重新引用useState的两个set方法并复用传递？

你直接给useState返回的set方法变量赋值是行不通的——首先setNameProp是const声明的，语法上不允许重新赋值；其次就算改成let，也不会触发父组件重新渲染，后续传给子组件的还是旧的引用。

正确的做法是用React的useState来存储这些子组件传来的set方法，这样当方法更新时，父组件会自动重新渲染，确保下游子组件拿到的是最新的方法引用。

实现代码示例 #

父组件

import { useState } from 'react';

function Parent() {
  // 用state存储子组件的set方法
  const [nameSetter, setNameSetter] = useState(null);
  const [descriptionSetter, setDescriptionSetter] = useState(null);

  // 接收子组件传来的set方法并更新state
  const onSubmit = ({ setName, setDescription }) => {
    setNameSetter(setName);
    setDescriptionSetter(setDescription);
  };

  return (
    <div>
      {/* 渲染提供set方法的子组件，传递接收回调 */}
      <SourceChild onSubmit={onSubmit} />
      
      {/* 确保set方法存在后，再传递给目标子组件 */}
      {nameSetter && descriptionSetter && (
        <TargetApp name={nameSetter} desc={descriptionSetter} />
      )}
    </div>
  );
}

提供set方法的子组件（SourceChild）

import { useState } from 'react';

function SourceChild({ onSubmit }) {
  const [name, setName] = useState('');
  const [description, setDescription] = useState('');

  // 在需要的时机（比如点击按钮）把set方法传给父组件
  const handleUpliftSetters = () => {
    onSubmit({ setName, setDescription });
  };

  return (
    <div>
      <input 
        value={name} 
        onChange={(e) => setName(e.target.value)} 
        placeholder="输入名称"
      />
      <textarea 
        value={description} 
        onChange={(e) => setDescription(e.target.value)} 
        placeholder="输入描述"
      />
      <button onClick={handleUpliftSetters}>传递set方法给父组件</button>
    </div>
  );
}

关键注意点 #

• 必须用useState存储set方法：只有通过React的state管理，才能触发组件更新，保证下游组件拿到最新的方法引用
• 渲染目标组件前加判断：初始时nameSetter和descriptionSetter是null，直接传递会导致目标组件调用无效方法，所以要先判断方法存在
• React保证set方法的稳定性：useState返回的set方法在组件生命周期内是稳定引用，不需要额外用useCallback包裹，直接传递即可

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