在 React Native 中，props 数据无法从函数访问或损坏，但在 useEffect 中正常 - 不知道为什么

Question

在一个 React Native 组件中，我在 JSX 中包含了另一个组件，并传递了一个 props 变量。

在子组件中，我可以通过 props 对象访问 props 值。

如果我在子组件中包含多个子组件，则在 userEffect 函数中，props valid 是可读的，如果我尝试在另一个函数中访问相同的 props 值，它要么为 null，要么包含不同同级的值/子组件，这真的很奇怪。

例如父组件：-

<>
  <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); // PROBLEM IS HERE VALUE MAY BE WRONG
  };
};
export default SubComponent;

上面，在 _runMyFunction 函数中， props.myvalue 可能与 useEffect 中的不同（实际上我发现它是父组件中 SubComponent 所有实例的最后一个值，所以在我的日志输出中我'将看到 2 X“我的值现在 = 200”。

我不确定为什么会遇到这个问题。 这就像子组件实例之间的一些全局串扰，我认为这不会发生。

以上是我的组件/子组件的精简版本。

感谢您的任何想法/建议

德里克

Answer 1

当您创建不带

var

/

let

/

const

的变量时，它会隐式地成为全局变量。这意味着每次创建

<SubComponent />

实例时，您都会更新单个全局

_runMyFunction

以指向最后定义的

_runMyFunction

。切勿在没有

var

/

let

或

const

的情况下创建变量，否则您会遇到像这样的意外问题。以下是有关如何修复代码的示例：

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

  useEffect(() => {
    console.log('myvalue = '+props.myvalue);
    _runMyFunction();
  });
  
  // v--- use `const` or `let` or `var`
  const _runMyFunction = async () => {
    console.log('myvalue now = '+props.myvalue);
  };
};

使用

const

/

let

/

var

将使

_runMyFunction

成为

SubComponent

函数的本地变量，避免之前创建的隐式全局变量。