React子组件内函数首次触发时props.data为空问题求助

问题代码 #

const Parent = () => {
  const [state, useState] = useState(); // 初始值为undefined
  useEffect(() => {
    // 模拟异步API请求
    setTimeout(() => {
      const apiData = { id: 1, name: "test data" };
      useState(apiData);
    }, 2000);
  }, []);
  const handleClick = () => {
    // sample
  };
  return <ChildComponent handleClick={handleClick} data={state} />;
};

// ChildComponent
const ChildComponent = (props) => {
  const handleClick1 = (e) => {
    // 首次点击时props.data为空，API返回后点击正常
    console.log(props.data); // 初始点击输出undefined
  };
  return <button onClick={handleClick1}>点击测试</button>;
};

问题原因 #

核心是闭包捕获的旧值：

• 组件初始渲染时，父组件的state是undefined，此时子组件创建handleClick1函数，这个函数会闭包捕获当前的props.data（也就是undefined）。
• 异步API请求完成后，父组件调用useState更新state，此时父组件会重新渲染，子组件也会重新渲染并生成新的handleClick1函数，这个新函数会捕获最新的props.data。
• 如果在API返回前点击按钮，触发的是初始渲染时创建的旧handleClick1，所以打印的还是初始的空值。

你提到“父组件未重新渲染”应该是误解——调用setState一定会触发组件重新渲染，除非你用了React.memo且props没变化，但这里data从undefined变成了API返回值，props是变化的，父组件必然会重新渲染。

解决方案 #

方案1：用useRef保存最新的props.data

在子组件中用useRef实时同步最新的props.data，确保点击时总能拿到最新值：

import { useRef, useEffect } from 'react';

const ChildComponent = (props) => {
  const dataRef = useRef(props.data);
  
  // 实时同步props.data到ref
  useEffect(() => {
    dataRef.current = props.data;
  }, [props.data]);

  const handleClick1 = (e) => {
    console.log(dataRef.current); // 始终获取最新的data
  };
  return <button onClick={handleClick1}>点击测试</button>;
};

方案2：在点击时判断数据是否存在

避免用户在数据加载完成前无效点击，可添加状态判断：

const ChildComponent = (props) => {
  const handleClick1 = (e) => {
    if (!props.data) {
      console.log('数据还在加载中，请稍后再试');
      return;
    }
    console.log(props.data);
  };
  
  return <button onClick={handleClick1} disabled={!props.data}>
    {props.data ? '点击测试' : '加载中...'}
  </button>;
};

方案3：用useCallback配合React.memo优化（兼顾性能与闭包）

如果父组件存在频繁渲染场景，可通过useCallback缓存函数，同时子组件用React.memo减少不必要渲染，确保函数依赖更新时捕获最新值：

import { useCallback } from 'react';

const Parent = () => {
  // ... 其他代码不变
  return <ChildComponent handleClick={handleClick} data={state} />;
};

const ChildComponent = React.memo((props) => {
  // 让handleClick1依赖props.data，确保每次data更新时生成新函数
  const handleClick1 = useCallback((e) => {
    console.log(props.data);
  }, [props.data]);
  
  return <button onClick={handleClick1}>点击测试</button>;
});

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