从其他组件访问数据 - React Native

IT技术 reactjs react-native ecmascript-6
2021-05-09 02:55:14

我必须从前一个组件访问对象以显示在当前组件中。我正在尝试发送一个状态参数作为导航方法的第二个参数。

this.props.navigation.navigate('detail', { objPass: this.state.stObjPass });

尝试访问当前组件中显示为“未定义”的值时

   async componentWillMount() {
   console.log(this.props.state.params.objPass);
   console.log(this.props.objPass);
   console.log(this.props.state.objPass);
    }

所有这些都返回空或未定义。

请让我知道如何共享对象。

4个回答

它是this.props.navigation.state.params.objPass,所以你只是有一个不正确的参考。

我认为问题出在此声明中。

this.props.navigation.navigate('detail', { objPass: this.state.stObjPass });

请检查 this.state.stObjPass 是否正确,并从控制台检查键值对。

console.log(this.props.navigation.state.params);

当您使用导航传递参数时,您需要从导航中获取这些参数,如下所示:

this.props.navigation.state.params.objPass

从这里阅读更多

通常我们这样做:

onClickMore = (user) => {
    this.props.navigation.navigate('Details', { ...user });
};

然后在我们需要它的组件中,我们从navigation以下位置加载

const { picture, name, email, phone, login, dob, location } = this.props.navigation.state.params;

注意:请参阅我使用了...作为 es6 语法的扩展运算符来传递对象,并查看我如何使用this.props.navigation.state.params然后解构它来导入/读取目标组件还有其他方法可以编写相同的语法。

this.props.navigation可在任何正在呈现的组件中使用 - 直接由 React Navigation 提供(请参阅此处的文档

现在,navigation它像桥一样工作,以某种方式传递数据和获取数据,同时进行屏幕转换。(请参阅此处的文档

有关更多信息,请参阅本文(这可能会有所帮助):https : //hackernoon.com/getting-started-with-react-navigation-the-navigation-solution-for-react-native-ea3f4bd786a4

几个检查点:

  • 在将它传递给navigation.
  • this.props.navigation在将其他组件/屏幕的数据传递, 之前,您拥有对 的有效引用
  • 在目标组件/屏幕中,检查您是否对this.props.navigation.state.

您可以使用console.log()函数调试所有这些

此外,如果您在完成上述调试后将代码上传到 Git 上会更有帮助,因此您会得到正确的响应。可能是其他地方的问题。