时间戳

首页 > 解决方案 > 即使在从字符串生成散列后也出现唯一键警告

reactjs - 即使在从字符串生成散列后也出现唯一键警告

问题描述

我尝试了多种方法，但我的想法已经用完了。我无法摆脱警告“列表中的每个孩子都应该有一个唯一的“关键”道具”。我正在显示表单验证的错误消息。

<Alert variant="danger" id="shopFormErrorsAlert" className={hasError?"visible":"invisible"}>
  {Object.keys(shopFormErrors).map((objKey, index) => {                            
    return (
      <ul id={objKey}>
      {shopFormErrors[objKey]['error'] && Object.keys(shopFormErrors[objKey]['errorMsg']).map((hash) => {
        return (
          <li id={hash}>{shopFormErrors[objKey]['errorMsg'][hash]}</li>
        )
      })}
      </ul>                            
    )
  })}                            
</Alert>

我引入了哈希（基于内容创建）作为数组键来克服警告

  nObj[fieldName]['errorMsg'] = []
  var id
  var i; // creating a unique id to over come unique 'key' warning 
  for (i = 0; i<errors[fieldName].length ; i++){
    id = 'i' + hashCode(errors[fieldName][i]); 
    nObj[fieldName]['errorMsg'][id] = errors[fieldName][i]
  }

  nObj[fieldName]['error'] = true
  nObj[fieldName]['className'] = 'inputRequired'

生成的html 

<div role="alert" id="shopFormErrorsAlert" class="fade visible alert alert-danger show">
    <ul id="pincode">
        <li id="i-1650524308">The pincode field is required.</li>
        <li id="i-557689933">The pincode must be a number.</li>
    </ul>
    <ul id="email">
        <li id="i16726618">The email must be a valid email address.</li>
    </ul>
</div>

标签： reactjs

解决方案

您必须为map(). 在这种情况下，将keyprop 添加到ul：

<ul id={hash} key={index}>
  <li key={`${index}_li`}>...</li>
</ul>

请注意，我已在此处添加index，但您可以使用任何唯一键（hash如果它是唯一的，则更好）。

来自文档：

React 会改变每个孩子，而不是意识到它可以保持 <li>Duke</li>和<li>Villanova</li>子树完整。这种低效率可能是一个问题。

钥匙

为了解决这个问题，React 支持一个 key 属性。当孩子有键时，React 使用键将原始树中的孩子与后续树中的孩子进行匹配。例如，在我们上面的低效示例中添加一个键可以使树转换高效：

<ul>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

<ul>
  <li key="2014">Connecticut</li>
  <li key="2015">Duke</li>
  <li key="2016">Villanova</li>
</ul>

推荐阅读