React Navigation：使用this.props.navigation.state.params接收'undefined'

Question

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

我传递了两个参数;对于ArticleBody屏幕，title和body。

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
    });
  }

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

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}或<Text>并未显示任何内容。使用console.log显示{title}和{body}是 undefined 。

然而！如果我使用params.title或params.body，则两者都会显示出来。但是，根据文档，调用title或body应该有效。

但是，这是另一个问题。如果我将const { title } = params ? params.title : null;更改为const { title } = params.title，当我致电title

时，仍然显示为未定义

我很难过。到目前为止，我可以直接调用params.title或params.body，但它也应该在定义的变量中工作，对吗？

我做错了什么？

更新

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

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

Answer 1

问题在于你的代码

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

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

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;

Answer 2

使用props.route而不是props.navigation

Answer 3

如果不建议使用react-navigation v5“ getParam”，那么 使用可选的链接和无效的合并运算符可以实现相同的目的：

const data = navigation.getParam('someParam', 'defaultValue');

等效于：

const data = route.params?.someParam ?? 'defaultValue';