错误：对象作为 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 在渲染中定义：

 <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));

从代码 sn-p 中可以看出，在数组上使用 Object.keys 将导致在 map 函数的每次迭代中传递索引，而不是您想要的对象。