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
}

我觉得这个解决方案是长期和个人的，因为我在我的javascript项目中使用lodash你可以使用lodashs＆＃39; get，就像这样（如果你想使用lodash，当然）。或者，您可以尝试使用一个小函数为您运行null coalesce。

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

（如果没有找到/未定义任何节点，则第三个arg是一个值。我将其设置为false以传递此if语句，因为我们的数据不存在）

以上示例适用于JS，如果您想将其全部保存在jsx中，您可以使用＆amp;＆amp;伎俩，如：

{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运行时，你的道具可能不是第一个渲染。

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

1 个答案: