使用 FieldArray 组件的 Formik 键错误

Question

我在formik中使用select组件来显示多个字段，但是有一个关键错误。

我的代码片段： https://codesandbox.io/s/loving-shirley-r0jlh?file=/src/income-info.jsx

重现步骤：

1. 尝试 select 一些值并单击“添加”按钮
2. Select下一个值
3. 单击第一项中的“删除”按钮并更改其余项中的 select 值
4. 在这一步您可以看到添加的新项目（这是意外行为）和控制台中的错误

Answer 1

问题出在 key 属性 上。您将 id 作为 key 属性 传递。所以每次您删除该项目时，新项目都会提供相同的密钥。

您需要向 map 函数中的每个子项（项）传递一个唯一的键。

作为解决方案，您可以使用 uuid package.

然后导入到组件中作为key 属性:

import { v4 as uuidv4 } from 'uuid';

// rest of the codes ...

return (
  <div key={uuidv4()}>

// rest of the codes ...