React Native 组件中通过 props 访问对象答案

【问题标题】：Accessing an object passed through props in the component of ReactNativeReact Native 组件中通过 props 访问对象
【发布时间】：2018-03-03 21:46:34
【问题描述】：

我对 ReactNative 很陌生，而且我的 javascript 也不是很好，所以如果这很愚蠢，请原谅我（我已经搜索了整个 google 和 stackoverflow，但似乎无法找到我问题的直接答案）：

我定义了一个简单的组件：

export default class SPlanet extends React.Component {
  constructor(props) {
    super(props)
  }

  render() {

    const planet = this.props ? this.props.planet : null;
    console.log(planet);

    return (
      <View>
        <Text>{this.props.planet}</Text>
      </View>
    );
  }
}

在 app.js 中调用如下：

<SPlanet planet={planetDB.Atraxia}/>

并且该对象的定义如下：

const planetDB = {
  Atraxia : {
    type : "gas",
    name : "Atraxia",
    economy : 10,
    resources : 3,
    loyalty : "70%",
    side : "enemy"
  },
}

现在这基本上可以工作了（它不会抛出任何错误）。它只会将对象传递给控制台日志，但不会在文本中显示任何内容。

但如果我只想显示名称怎么办？我试过了

  console.log(planet.name);

但抛出错误：“undefined is not an object”

我也尝试将它作为一个简单的数组发送并像这样调用它

  console.log(planet[0]);

但我得到同样的错误。

我确信这是我的一个愚蠢的错误，我错过了一些语言的基础知识，但我很难过。帮忙？

【问题讨论】：

试试if (planet) console.log(planet.name);;这样如果第一次调用你的组件时没有传递行星道具，它就不会失败
@Ben 感谢您的提示，这是一个在我测试它时防止它崩溃的好主意。但是关于如何获取该对象数据的任何想法？
如前所述，您的代码应该可以工作，您应该能够访问您的属性 if planet props 不为空。也就是说，取决于您的代码，并且因为反应重新渲染，我只是希望它会失败，因为它在您第一次调用组件时没有通过（如果产品以某种方式为空，console.log(product) 将通过，console.log(product.name) 赢了't，但如果在重新渲染道具后可以有效地通过）。试试这个gard，你可能会看到不同；如果没有，请发送更多代码 (app.js)
@Ben 你是对的，行星显示为空。那么如何让它通过道具呢？
如前所述，您的代码应该可以工作，但如前所述，如需进一步帮助，send more of your code (app.js)

标签： javascript reactjs react-native jsx

【解决方案1】：

在玩了很久之后，我想到了这个：

const planetDB = {
  "Atraxia" : {
    type : "gas",
    name : "Atraxia",
    economy : 10,
    resources : 3,
    loyalty : "70%",
    side : "enemy"
  },
}

通过在行星名称周围添加引号，现在它突然起作用了。但是我不知道为什么。如果有人可以向我解释原因，我会将它们标记为答案。

【讨论】：

如果您将planetDb 存储为json 对象，引用将很重要，否则它们不会改变任何内容，因为显然该对象位于js 文件中。我想知道什么是有效的，因为我看到 <Text> 标签的问题，你将孩子作为一个对象传递，所以说“它正在工作”，你指的是console.log？
@IsaacSekamatte，呵呵，我没想到。它在父屏幕上以这种方式工作并且不会引发任何错误，并且会将对象显示为连接字符串（gasAtraxia10370%enemy）。它甚至在我加引号之前就做到了，它永远不会让我看到我的 SPlanet 组件中各个属性的值，并且如果我尝试 console.log 各个属性也会崩溃。