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

laik7k3q 于 2023-06-20 发布在 Java

关注(0)|答案(1)|浏览(98)

当我试图配置文件信息的另一个用户显示重复与此错误“警告：遇到两个子进程具有相同的密钥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

JavaScript

来源：https://stackoverflow.com/questions/76504611/reactjs-two-children-with-the-same-key-react

1条答案

按热度按时间

9njqaruj1#

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

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

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

赞(0）回复(0）举报 2023-06-20

我来回答

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

1条答案

相关问题

热门标签

最新问答