javascript Reactjs两个孩子用相同的键React

laik7k3q  于 2023-06-20  发布在  Java
关注(0)|答案(1)|浏览(97)

当我试图配置文件信息的另一个用户显示重复与此错误“警告:遇到两个子进程具有相同的密钥the id of user here。键应该是唯一的,以便组件在更新过程中保持其标识。非唯一键可能会导致子项重复和/或省略-不支持此行为,并且可能会在未来版本中更改。
我试了索引,没有用,我试了身份证号,也没有用。我绝望了
这是我的代码

<div className='ProfileInfo'>
    {userData.length > 0 && userData.map(((user, index) => (
      
      <div className='profileInfo-container' key={index} >

        <div className='profileInfo-top'>
        </div>
        <div className='profileInfo-center'>
          <img className='profile-avatar' fontSize="large" src={auth.user.avatar} alt=""/>
          {user._id && auth && user._id === auth.user._id ? 
          <button className='addfbtn' onClick={()=>setEdit(true)}>EDIT PROFILE</button>
          : <GlobalFriendBtn classBtn="addfbtn" user={user}/>
          }
        </div> ... etc، 

   look at this:
   https://www11.0zz0.com/2023/06/19/07/487328533.png
9njqaruj

9njqaruj1#

如果每个用户都有唯一的ID,这应该可以工作。

<div className='ProfileInfo'>
  {userData.map(user => (
    <div className='profileInfo-container' key={user._id}>
       ...
    </div>
  ))}
</div>

可能会发生多个用户具有undefined或类似的ID,这会导致错误。
另一个注意事项:你不需要检查数组的长度,如果数组为空,userData.map将不显示任何内容。

相关问题