console.log this.props显示未定义，但在react redux页面上正确呈现

Question

我在react redux项目中有一个非常奇怪的错误。 我有有效载荷

const req = {  
  setcolor:false,
  hours:2,
  searchterm:'',
  dropdownvalue:1,
  dropdownvaluetwo:1,
  rooms:[  
    'private-messages',
    'project2',
    'project3',
    'project4',
    'project5',
    'project6',
    'project7',
    'project8',
    'project9'
  ],
  chatrooms:[  
    {  
      key:1,
      color:false,
      name:'private-messages'
    },
    {  
      key:2,
      color:false,
      name:'project2'
    },
    {  
      key:3,
      color:false,
      name:'project3'
    },
    {  
      key:4,
      color: false,
      name:'project 4'
    },
    {  
      key:5,
      color: false,
      name:'project 5'
    },
    {  
      key:6,
      color: false,
      name:'project 6'
    },
    {  
      key:7,
      color: false,
      name:'project 7'
    },
    {  
      key:8,
      color: false,
      name:'project 8'
    },
    {  
      key:9,
      color: false,
      name:'project 9'
    }
  ],
  projectchat:[  
    {  
      projectname:'private-messages',
      chatmessages:[  
        {  
          username: 'ankur',
          message: 'whatsup'
        },
        {  
          username: 'ankur',
          message: 'kya hal hai'
        }
      ]
    },
    {  
      projectname:'project2',
      chatmessages:[  
        {
          username: 'ankur',
          message: 'whatsup'
        },
        {  
          username: 'ankur',
          message: 'kya hal hai'
        }
      ]
    }
  ]
};

现在，在前端，如果我使用

<div>
  {this.props.projectlist.hours}
</div>

我在页面上看到正确的值为2。但是，如果我这样做

<div>
{this.props.projectlist.chatrooms[0].name}
</div>

由于属性未定义，这引发了我错误。

现在，如果我愿意

<div>
{console.log("this.props",this.props.projectlist}
{this.props.projectlist.chatrooms[0].name}
</div>

此控制台日志显示未定义。 这确实是一个奇怪的错误。 或者，我忽略了一些非常简单的内容，或者这个怪癖与redux内部工作有关。 有人可以帮我吗？

Answer 1

我假设您是从端点或某种异步方式获取此req对象的。 如果是这种情况，那么有时this.props.projectlist尚未成为您的请求对象，因此this.props.projectlist.chatrooms将是未定义的，这意味着聊天室没有索引0，依此类推。 。

您可以通过在尝试使用值之前确保其值已经到位来解决此问题。

遵循以下原则

if (this.props.projectlist && this.props.projectlist.chatrooms && this.props.projectlist.chatrooms[0] && this.props.projectlist.chatrooms[0].name ) {
// run my code
}

我发现此解决方案lodash ，因为我在我的javascript项目中使用lodash，所以您只能使用lodashs的get ，就像这样（当然，如果您想使用lodash）。 另外，您可以尝试做一些小功能来为您运行空合并。

 if (_.get(this.props.projectlist, 'chatrooms[0].name', false ) {
// run my code
}

（如果未找到/未定义任何节点，则此处的第三个arg是aa值。由于我们的数据不存在，我将其设置为false以通过此if语句）

上面的示例是针对JS的， 如果要将其全部保留在jsx中，也可以使用&&技巧 ，例如：

{this.props.projectlist && this.props.projectlist.chatrooms && this.props.projectlist.chatrooms[0] && this.props.projectlist.chatrooms[0].name &&
 <div>
   {this.props.projectlist.chatrooms[0].name}
 </div>
}

TL：DR-当console.log运行时，您的道具可能不在第一个渲染处。