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運行時，您的道具可能不在第一個渲染處。