如何更新传递给子组件的函数？React组件状态更新方案

一、基础实现：传递父组件回调并处理子组件状态 #

首先修正代码中的props匹配问题，父组件传递的回调名称要与子组件接收的名称统一，同时在子组件的handleChange中先更新自身状态，再调用父组件的回调逻辑：

修改后的父组件代码

import { useState } from 'react';
import ChildComponent from './ChildComponent';

const ParentComponent = () => {
  // 修正useState的正确解构写法
  const [identifierValue, setIdentifierValue] = useState([]);
  // 其他状态定义...

  const handleChange = (_, items) => {
    // 父组件的状态更新逻辑
    setIdentifierValue(items);
    // 其他状态更新操作...
  };

  return (
    <ChildComponent
      selectedItem={identifierValue}
      onChange={handleChange} // 传递父组件回调
    />
  );
};

export default ParentComponent;

修改后的子组件代码

import { useState } from 'react';
import Dropdown from './Dropdown';

const ChildComponent = ({ selectedItem, onChange }) => {
  // 子组件本地状态
  const [childLocalState, setChildLocalState] = useState('');

  const handleChange = (_, items) => {
    // 1. 先更新子组件本地状态
    setChildLocalState(`选中了${items.length}个选项`);
    // 2. 调用父组件传递的回调，同步参数给父组件
    onChange(_, items);
  };

  return (
    <div>
      <p>{childLocalState}</p>
      <Dropdown
        selectedItem={selectedItem}
        onChange={handleChange}
      />
    </div>
  );
};

export default ChildComponent;

二、性能优化：使用useCallback避免不必要重渲染 #

如果父组件的handleChange依赖其他状态，每次父组件重渲染时都会生成新的函数实例，导致子组件无意义重渲染。此时可以用useCallback包裹父组件的回调，结合React.memo包裹子组件，减少冗余渲染：

优化后的父组件

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

const ParentComponent = () => {
  const [identifierValue, setIdentifierValue] = useState([]);
  // 假设存在其他依赖状态
  const [otherState, setOtherState] = useState('');

  // 用useCallback包裹回调，指定依赖项数组
  const handleChange = useCallback((_, items) => {
    setIdentifierValue(items);
    // 若依赖otherState，需加入依赖数组
    console.log(otherState);
  }, [otherState]); // 仅当依赖项变化时，才重新生成回调函数

  return (
    <ChildComponent
      selectedItem={identifierValue}
      onChange={handleChange}
    />
  );
};

export default ParentComponent;

优化后的子组件

import { useState, memo } from 'react';
import Dropdown from './Dropdown';

// 用memo包裹子组件，仅当props变化时才重渲染
const ChildComponent = memo(({ selectedItem, onChange }) => {
  const [childLocalState, setChildLocalState] = useState('');

  const handleChange = (_, items) => {
    setChildLocalState(`选中了${items.length}个选项`);
    onChange(_, items);
  };

  return (
    <div>
      <p>{childLocalState}</p>
      <Dropdown
        selectedItem={selectedItem}
        onChange={handleChange}
      />
    </div>
  );
});

export default ChildComponent;

关键说明 #

• props名称统一：父组件传递的回调名称必须与子组件接收的名称一致，避免因名称不匹配导致回调无法触发。
• 逻辑执行顺序：优先处理子组件本地状态更新，再调用父组件回调，确保状态同步逻辑的正确性。
• useCallback适用场景：仅当父组件回调存在状态依赖，且子组件重渲染成本较高时才需要使用；若父组件状态变化频率低或子组件渲染开销小，可跳过该优化。

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