React Navigation:使用 this.props.navigation.state.params 接收“未定义" [英] React Navigation: receiving 'undefined' with this.props.navigation.state.params

问题描述

当我将道具传递到另一个屏幕时，我遇到了一个奇怪的问题.

I have a strange problem when I am passing props down to another screen.

我传递了两个参数；title 和 body，到文章正文屏幕.

I am passing two parameters; title and body, to ArticleBody screen.

class ListButtonWrapper extends React.Component {
  constructor(props){
    super(props);
    this.articleSelected = this.articleSelected.bind(this);
  }

  articleSelected() {
    this.props.navigation.navigate('ArticleBody', {
      title: this.props.title,
      body: this.props.body
    });
  }

当按钮被按下时，它应该将这些道具传递到下一个屏幕.确实如此！

When the button is pressed, it should pass those props to the next screen. And it does!

class ArticleBody extends React.Component {
render() {

    const { params } = this.props.navigation.state;
    const { title } = params ? params.title : null;
    const { body } = params ? params.body : null;
    console.log(title, body, params.title, params.body);
    return (
      <View>
      <Text>Title: {title}</Text>
      <Text>Body: {body}</Text>
      </View>
    );

但是，在 中调用 {title} 或 {body} 不会显示任何内容.使用 console.log 显示 {title} 和 {body} 未定义.

However, calling {title} or {body} in <Text> doesn't show anything. Using console.log reveals that {title} and {body} are undefined.

但是！如果我使用 params.title 或 params.body，它们都应该显示出来.但是，根据文档，调用 title 或 body 应该可以工作.

However! If I use params.title or params.body, both show up as they should. But, according to the documentation, calling title or body should work.

但是，还有一个问题.如果我更改 const { title } = params ?params.title : null; 到 const { title } = params.title 它仍然 在我调用 title 时显示为未定义

But, here's another problem. If I change const { title } = params ? params.title : null; to const { title } = params.title it still shows up as undefined when I call title

我被难住了.到目前为止，我可以直接调用 params.title 或 params.body，但它也应该在定义的变量中工作，对吧?

I'm stumped. So far I can call params.title or params.body directly, but it should be working in the defined variables as well, right?

我做错了什么?

更新

想添加一点更新.如果我 console.log this.props.navigation.state，我会看到道具被传递给了 ArticleBody.这是日志:

Want to add a little update. If I console.log this.props.navigation.state, I see that the props are being passed down to ArticleBody. Here is the log:

{params: {…}, key: "id-1519274761934-2", routeName: "ArticleBody"}
key: "id-1519274761934-2"
params:
  body:"more stuff"
  title:"stuff"
__proto__
Object
routeName:"ArticleBody"
__proto__
Object

推荐答案

问题在于您的代码

const { title } = params ? params.title : null;
const { body } = params ? params.body : null;

三元条件决定了您要对其进行解构赋值的对象.在您的情况下，它是 params.title 或 params.body.所以你实际上变成了

The ternary condition is deciding which object you're trying to do a destructuring assignment on. In your case it's either the params.title or params.body. So your actually becomes

title = params.title.title
body = param.body.body

你应该使用

const { title, body } = params ? params: null;

或

const title = params ? params.title: null;
const body = params ? params.body : null;

这篇关于React Navigation:使用 this.props.navigation.state.params 接收“未定义"的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！