React函数组件中函数仅传递给首个子组件的异常排查

问题场景 #

你构建的React组件层级如下：

const ContainerComponent = () => {
  const [total, setTotal] = useState(initialValue);
  const updateFunction = () => { console.log('It got called'); }

  return (
    <EntryComponent updateFunction={updateFunction} />
  );
}

const EntryComponent = ({updateFunction}) => {
  const services = [{}, {}, {}];

  return (
    {services.map((service) => <ServiceComponent updateFunction={updateFunction} />}
  );
}

const ServiceComponent = ({updateFunction}) => {
  return (
    <input type='checkbox' onChange={updateFunction} ></input>
  );
}

问题现象 #

预期updateFunction能传递到每个ServiceComponent的checkbox onChange事件，触发时更新ContainerComponent的total值，但实际只有首个ServiceComponent能获取到该函数，其余实例中该函数为undefined。其他类型的props（对象、基本类型）均可正常传递给所有子组件。

根因与解决方案 #

经排查确认，问题出在项目中多个位置创建ServiceComponent时，遗漏了传递updateFunction这个函数属性。针对这个问题，可以按以下方式修复：

• 全面检查项目中所有渲染ServiceComponent的代码位置，确保每一处都显式传递updateFunction prop，不要遗漏任何一个实例
• 如果ServiceComponent在多个层级或多处被使用，为了避免重复手动传递的麻烦，可以使用React Context来统一管理和分发updateFunction，这样所有子组件都能直接从Context中获取该函数，无需逐层传递
  示例Context实现：

  // 创建Context
  const UpdateContext = React.createContext();
  
  // 在ContainerComponent中提供Context值
  const ContainerComponent = () => {
    const [total, setTotal] = useState(initialValue);
    const updateFunction = () => { 
      console.log('It got called');
      // 这里可以添加更新total的逻辑
      setTotal(prev => prev + 1);
    }
  
    return (
      <UpdateContext.Provider value={updateFunction}>
        <EntryComponent />
      </UpdateContext.Provider>
    );
  }
  
  // 在ServiceComponent中消费Context
  const ServiceComponent = () => {
    const updateFunction = useContext(UpdateContext);
    return (
      <input type='checkbox' onChange={updateFunction} ></input>
    );
  }
  

额外优化点 #

当传递函数类型的props时，可使用useCallback包裹函数，避免因组件重渲染导致不必要的函数创建，优化性能：

const updateFunction = useCallback(() => {
  console.log('It got called');
  setTotal(prev => prev + 1);
}, []);

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