React form with Formik error : Each child in a list should have a unique "key" prop

Question

非常简单的问题。我正在使用 Formik 构建一个包含多个“相同”行的表单。每行由 Name 和 Surname 输入 + 一个按钮组成

键（来自地图索引）位于最外层元素

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

<Formik...>
            {({values}) => (
                <FieldArray name={"authors"}>{({push, remove}) => (
                    <Form onSubmit={handleSubmit}>
                        {values.authors.map((author, index) => (
                            <PropertySubmissionFields author={author} index={index}/>
                        ))}

                    </Form>
                )}
                </FieldArray>)}
        </Formik>

在<PropertySubmissionFields>中，键（来自地图索引）被放置在最外层元素（每行）：

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>

我可以使用控制台显示索引（数字 0、1 等）。但是，我看不到 DOM 元素内的键（Form.Row 显示为 <div>

有什么想法吗？

Answer 1

通常一旦使用 .map()，您需要将 key 属性添加到每个呈现的元素以避免该警告消息。因此，基于此，您需要执行以下操作 - 添加 key 为：

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

请参阅我建议的解决方案中添加的 key={index} 属性。

进一步了解 Lists and Keys in the documentation, especially the Keys section。

React form with Formik error : Each child in a list should have a unique "key" prop

React form with Formik error : Each child in a list should have a unique "key" prop

javascript

dom

jsx

reactjs

formik