Javascript React form with Formik error：列表中的每个子级都应该有一个唯一的；“关键”；道具

这个问题很简单。 我正在用Formik构建一个具有多个“相同”行的表单。每行由姓名输入+一个按钮组成

键（来自映射索引）放置在最外层的元素上

我去掉了来自Formik的一些样板代码（handleChange、handleBlur等）：

{（{values}）=>(
{（{push，remove}）=>(
{values.authors.map（（author，index）=>(
))}
)}
)}

在

中，键（来自映射索引）位于最外层元素（每行）：

返回
名词
{msg=>{msg}
笔名
{author.name！='null'&&
{msg=>{msg}
}


{
警报（“移除”）；
}}>
X

我可以使用控制台显示索引（编号0、1等）。 但是，我看不到DOM元素中的键（

Form.Row

显示为

---

有什么想法吗？

通常一次使用

.map（）

您需要为每个呈现元素添加

key

属性，以避免出现警告消息。因此，基于此，您需要执行以下操作-添加

key

：

{
  values.authors.map((author, index) => (
     <PropertySubmissionFields key={index} author={author} index={index}/>
  ))
}

{
values.authors.map（（author，index）=>(
))
}

请参阅我建议的解决方案中添加的

key={index}

属性

---

请进一步阅读文档中的相关内容，尤其是。

未将

键

属性添加到DOM中。此外，使用索引作为键不是一个好主意。有什么原因说明索引不是一个好的候选项吗？

return <Form.Row key={index}>
<Form.Group as={Col} controlId="formGridName">
    <Form.Label>Prénom</Form.Label>
    <Form.Control
        name={`authors[${index}].name`}

    />
    <ErrorMessage name={`authors[${index}].name`}>
        {msg => <div className="error-message">{msg}</div>}
    </ErrorMessage>
</Form.Group>
<Form.Group as={Col} controlId="formGridSurname">
    <Form.Label>Nom</Form.Label>
    <Form.Control
        name={`authors[${index}].surname`}
        value={author.surname}
    />
    {author.surname !== 'null' && <ErrorMessage name={`authors[${index}].surname`}>
        {msg => <div className="error-message">{msg}</div>}
    </ErrorMessage>}
</Form.Group>
<Form.Group>
    <br/>
    <Button as={Col} className="mt-2 ml-1" type="button"
            onClick={() => {
                alert("remove");
            }}>
        X
    </Button>
</Form.Group>
</Form.Row>

{
  values.authors.map((author, index) => (
     <PropertySubmissionFields key={index} author={author} index={index}/>
  ))
}