Question

我具有以下功能组件。它基本上映射了一个对象数组，并返回一个充满选项的数据列表：

const Suggestions = (props) => {
    if(props.suggestions){    
        let data = props.suggestions.map(r => (
          <React.Fragment>
          {r.bar ? <option key={r.index} value={r.bar.toUpperCase()/> : null}
          {r.shop ? <option key={r.index} value={r.shop.toUpperCase()/> : null}
             </React.Fragment>
        ));

        return <datalist id="places">{data}</datalist>
    }
    return null
}

我仍然在控制台上收到以下警告：

Warning: Each child in a list should have a unique "key" prop.

Check the render method of `Suggestions`.

我在做什么错了？

Answer 1

key prop应该放在循环渲染的根元素上。您的情况是React.Fragment。另外，请确保key在循环中的所有同级中都是唯一的：

let data = props.suggestions.map((r, index) => (
  <React.Fragment key={index}>
    {r.bar ? <option value={r.bar.toUpperCase()/> : null}
    {r.shop ? <option value={r.shop.toUpperCase()/> : null}
  </React.Fragment>
));

即使存在键，仍会收到“映射的项目应具有键”警告

1 个答案: