我收到警告“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”在反应js答案

【问题标题】：I get warning "warning: Each child in a list should have a unique "key" prop." in react js我收到警告“警告：列表中的每个孩子都应该有一个唯一的“关键”道具。”在反应js
【发布时间】：2020-02-12 09:00:20
【问题描述】：

我有以下渲染函数，其中我收到警告

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

有什么问题？为每个标签编写密钥是真的吗？

render() {
            return (
                [      <h1>Update Post</h1>,

                    <form>
                        <div >
                            <label>title</label>
                            <input type="text" value={this.state.title} onChange={this.handleTitleChange}   />
                        </div>
                        <div >
                            <label>body</label>
                            <input type="text"  value={this.state.body} onChange={this.handleBodyChange}  />
                        </div>
                        <div >
                            <label>userId</label>
                            <input type="text" value={this.state.userId} onChange={this.handleUserIDChange} />
                        </div>
                        <div >
                            <input type="button" value="Update post"  onClick={this.handleUpdatePost} />
                        </div>
                    </form>


                ]
            );

        }

【问题讨论】：

你能再显示一些代码吗？ , 当你迭代一个数组但你没有为此提供 key prop 时会出现关键警告

标签： reactjs

【解决方案1】：

查看您的代码，您正在返回一个标记数组，类似于我们通常从 map 函数（一个标记数组）返回的内容，默认情况下该函数会被更改。将您的标记包装到 React.Fragment 似乎是一个非常合适的选择，而不是将其包装在数组中

【讨论】：

【解决方案2】：

render 函数返回的是一个包含 2 个元素的数组。

当你这样做时，React 知道，你可以在任何你喜欢的时候随机播放。因此，为了能够以尽可能少的重新渲染来“洗牌”DOM，React 要求您提供a key。

但是在这种情况下，我只需将 <form> 和 <h1> 都包含在其中一个中：

<div>
<React.Fragment> 或 its shortcut <>

【讨论】：

【解决方案3】：

这是因为您缺少返回数组中每个元素的键。键帮助 React 识别哪些项目已更改、添加或删除。应该为数组内的元素提供键，以使元素具有稳定的标识。

因此，您可以使用key={Math.floor(Math.random() * 100)} 为每个元素添加Keys

  return (
    [
      <h1 key={Math.floor(Math.random() * 100)}>Update Post</h1>,

      <form key={Math.floor(Math.random() * 100)}>
        <div>
          <label>title</label>
          <input
            type="text"
            value={this.state.title}
            onChange={this.handleTitleChange}
          />
        </div>
        <div>
          <label>body</label>
          <input
            type="text"
            value={this.state.body}
            onChange={this.handleBodyChange}
          />
        </div>
        <div>
          <label>userId</label>
          <input
            type="text"
            value={this.state.userId}
            onChange={this.handleUserIDChange}
          />
        </div>
        <div>
          <input
            type="button"
            value="Update post"
            onClick={this.handleUpdatePost}
          />
        </div>
      </form>
    ]
  );

【讨论】：

【解决方案4】：

您正在返回一个数组，并且在 React 中，数组的所有子元素都必须具有 key 属性；看到这个explanation。但在你的情况下，你不需要返回一个数组。 render 方法必须只返回一个元素，因此在您的情况下，您可以返回包含在另一个元素中的所有元素，例如 div，或者正确的方式，在 <Fragment> 标记中参见 here，或空元素<> 是<Fragment> 的快捷方式。

div:

return (
  <div>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </div>
);

空元素：

return (
  <>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </>
);

或作为片段：

return (
  <Fragment>
    <h1>Update Post</h1>
    <form>
      ...
    </form>
  </Fragment>
);

对于片段，您需要像这样导入它：

import React, { Fragment } from 'react'

【讨论】：