錯誤：對象作為React子對象無效（找到：帶有鍵的對象…）

Question

我試圖遍歷對象數組。 控制台上的this.state.saveFriendTag或this.props.userTags的值為：

構造函數中的狀態為：saveFriendTag：this.props.userTags？ this.props.userTags：[]，

代碼是：

if(this.props.cardData){
  if (this.state.saveFriendTag.length == 1) {
    taggedFriendsBlue =  this.state.saveFriendTag.map((item, index) => {
      console.log(item,"item");
      return (
        <span className="displayedName blue" key={index}>{item.firstname}</span>
      )
    })
  } 

作為回報，在render中定義了aggedFriendsBlue：

 <div className="pCard_contentContainer ">
     <textarea id="pcardTextarea" type="text" placeholder="Write Description here..." value={this.state.Description} onChange={this.textareaExpansion.bind(this)}></textarea>
       <If test={this.state.tagDone == true || this.state.saveFriendTag.length>0}>
       <div className="displayNames disp_inliFl">
         <span className="pcard_WithOne">-With</span>
           <div className="disp_inliFl">
               {taggedFriendsBlue}
           </div>
       </div>
    </If>
  </div>

誰能說出此控制台錯誤的原因？ 如何糾正？

Answer 1

看起來問題在於您正在數組上使用Object.keys 。 您可以刪除它，而直接使用.map 。

另外，您需要為span指定一個鍵。

<span key={item.id} ... />

 const array = [ { firstName: "test", lastName: "test2" } ]; console.log(Object.keys(array)); 

從代碼片段中可以看到，在數組上使用Object.keys將導致在map函數的每次迭代中傳遞索引，而不是您想要的對象。