Question

我有一个组件“表单”。我也从我的mongoDB数据库获得了一些数据，我发送的状态为(myData)。

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

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

当我在render方法中输入它时：

const  {myData}  = this.props;

console.log(myData);

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

{myData}看起来像这样：

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

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

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

我明白你不能在回报中使用对象。但它是我拥有的一个对象，而不是数组。

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

以下内容返回错误消息：myData is undefined

render(){

  const  {myData}  = this.props;

  console.log(myData);

  return(

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

  )

Answer 1

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

所以只需检查一下，它应该有效，如下：

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;