javascript - 错误 : Objects are not valid as a React child (found: object with keys. .........)

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

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