React Native子组件函数props异常，useEffect中正常的问题求助

父组件中渲染多个SubComponent实例，分别传递myvalue=100和myvalue=200，但子组件的自定义异步函数_runMyFunction中读取的props.myvalue总是显示最后一个实例的200，而useEffect中能正确打印对应实例的myvalue。

父组件代码：

<>
  <SubComponent key={100} myvalue={100} />
  <SubComponent key={200} myvalue={200} />
</>

子组件代码：

const SubComponent: React.FunctionalComponent = (props: Object) => {

  useEffect(() => {
    console.log('myvalue = '+props.myvalue);
    _runMyFunction();
  });

  _runMyFunction = async () => {
    console.log('myvalue now = '+props.myvalue); // 此处值错误
  };
};
export default SubComponent;

• 函数声明方式错误：你在函数组件里用了_runMyFunction = async () => {}这种类组件的方法绑定语法，这会让这个函数变成全局共享的变量，所有子组件实例共用同一个_runMyFunction引用。最后一个组件初始化时会覆盖这个函数的定义，导致所有调用都用最后一次绑定的props。
• 闭包陷阱（次要）：就算函数声明正确，异步函数执行时如果没处理闭包，也可能捕获旧的props，但这里核心问题是函数被全局共享了。

方法1：正确声明组件内部函数 #

在函数组件中用const直接声明内部函数，确保每个组件实例拥有独立的函数引用：

const SubComponent: React.FunctionalComponent<{ myvalue: number }> = (props) => {

  useEffect(() => {
    console.log('myvalue = '+props.myvalue);
    runMyFunction();
  }, [props.myvalue]); // 添加依赖项，避免不必要执行，同时确保props更新时触发

  const runMyFunction = async () => {
    console.log('myvalue now = '+props.myvalue);
  };

  return null; // 函数组件必须返回JSX，补充默认返回
};
export default SubComponent;

方法2：用useRef保存最新props #

如果异步操作需要确保拿到最新的props值，可以用useRef同步并读取最新props：

const SubComponent: React.FunctionalComponent<{ myvalue: number }> = (props) => {
  const propsRef = useRef(props);

  useEffect(() => {
    propsRef.current = props; // 每次props更新时同步到ref
    console.log('myvalue = '+props.myvalue);
    runMyFunction();
  }, [props.myvalue]);

  const runMyFunction = async () => {
    console.log('myvalue now = '+propsRef.current.myvalue); // 从ref取最新值
  };

  return null;
};
export default SubComponent;

额外注意点 #

• 给useEffect添加准确的依赖数组，比如[props.myvalue]，避免组件每次渲染都触发useEffect，同时保证myvalue变化时重新执行逻辑。
• 函数组件里禁止使用类组件的方法绑定语法（xxx = () => {}），这种写法会把变量泄漏到外部作用域，引发不同实例间的状态串值问题。

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