为什么我不能从这个对象渲染数据？我怎样才能？

Question

我有一个组件“表单”。我还有一些从我的 mongoDB 数据库中获得的数据，我调度了它们的状态 (myData)。

所以在 Form 组件中，我有一个 mapstatetoprops 函数来将 myData 转换为 props。 myData 是一个对象。

我想使用来自 myData 对象的数据，并在组件的返回函数中显示该对象的一些属性。

当我在渲染方法中输入这个时：

const  {myData}  = this.props;

console.log(myData);

我可以按照我想要的方式在控制台中查看我的对象及其内容。

{myData} 看起来像这样：

{ title: "mytitle", comments: [{comment: "qqq", vote: 1}, {comment: "www", vote: 2}]}

但是，由于某种我不明白的原因，我不能在组件的返回方法中使用{myData}。当我这样做时，我收到以下错误消息：

对象作为 React 子级无效。如果你打算渲染一个 孩子的集合，使用数组代替或使用包装对象 createFragment(object) 来自 React 插件

我了解您不能在退货中使用对象。但它是我拥有的对象，而不是数组。

我希望我可以在我的return : {myData.title} 中写下这个，以便在我的组件呈现时看到标题。

以下返回错误信息：myData is undefined

render(){

  const  {myData}  = this.props;

  console.log(myData);

  return(

  <div>{myData.title}</div>

  )

Answer 1

由于您在console 中获得了正确的值，看起来第一次渲染时，它没有在props 值中找到myData，您必须记住您的输出请参阅 console 是在您 展开 属性时计算的，而不是在调用 console.log 时计算的。事实上，Object 旁边的小 i 图标告诉你。

所以只需检查一下，它应该可以工作，如下所示：

render(){
    const  {myData}  = this.props;
    console.log(myData);
    return(
       <div> Hello {myData && myData.title} </div>
    )
}

在browser console 中运行，然后展开object，它将显示更新后的值而不是初始值：

obj = {a: 1, b: 2, c: 3, d: 5, arr: []}; 
console.log(obj);
obj.a = 5;