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

Question

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

我正在传递两个参数； title 和 body，到 ArticleBody 屏幕。

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

但是，在 <Text> 中调用 {title} 或 {body} 不会显示任何内容。使用 console.log 显示 {title} 和 {body} 是 undefined。

但是！如果我使用 params.title 或 params.body，两者都会按应有的方式显示。但是，根据文档，调用 title 或 body 应该有效。

但是，还有一个问题。如果我将 const { title } = params ? params.title : null; 更改为 const { title } = params.title 它 still 在我调用 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';

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

React Navigation: receiving 'undefined' with this.props.navigation.state.params

react-native

react-navigation