错误：对象无效作为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>
      )
    })
  } 

这是回报，taggedFriendsBlue在render中定义：

 <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} ... />

＆＃13;

＆＃13;

const array = [
  {
    firstName: "test",
    lastName: "test2"
  }
];

console.log(Object.keys(array));

＆＃13;

＆＃13;

＆＃13;

从代码片段中可以看出，在数组上使用Object.keys将导致索引在map函数的每次迭代中传递，而不是按照您的意图传递对象。