Javascript 为reactjs中的项目添加唯一键

我有下一个申请：

{（字段，{add，remove}）=>{
返回(
{fields.map（（字段，索引）=>{
控制台日志（“m”，字段）；
返回(
{fields.length>1(
{
删除（字段名称）；
}}
/>
)：null}
);
})}
{
添加（）；
}}
样式={{width:“60%”}
>
添加字段
);
}}
提交

作为reactJs primary，每次更改该组件的状态时，都会对重新呈现项目起作用。它需要一个唯一的关键点来跟踪每个项目，以便可以优化重新渲染。并非每次都需要重新渲染所有项目

---

此警告实质上意味着您有多个具有相同键名的项。为了解决此问题，您必须为每个正在更新的子组件提供唯一的“键”属性，这些组件可能会触发重新渲染。

您的代码中有两个

表单。项
组件，它们使用相同的键
索引
，尝试使用不同的键，如
'item1'+索引
和
'item2'+索引

而且，在index.js文件中也存在同样的问题

这里是您提供的演示：
您不需要多次使用key={index}或key={“g”}
只使用一次

请尝试以下内容

import React from 'react';
import ReactDOM from 'react-dom';
import 'antd/dist/antd.css';
import './index.css';
import { Form, Input, Button, Space } from 'antd';
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';

const Demo = () => {
  const onFinish = values => {
    console.log('Received values of form:', values);
  };

  return (
    <Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
      <Form.List name="users">
        {(fields, { add, remove }) => {
          return (
            <div>
              {fields.map(field => (
                <Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
                  <Form.Item
                    {...field}
                    name={[field.name, 'innerName']}
                    fieldKey={[field.fieldKey, 'innerName']}
                    
                  >
                    <Input placeholder="passenger 1" />
                  </Form.Item>
                  <Form.Item
                    {...field}
                    name={[field.name, 'innerName2']}
                    fieldKey={[field.fieldKey, 'innerName2']}
                  >
                    <Input placeholder="passenger 2" />
                  </Form.Item>

                  <MinusCircleOutlined
                    onClick={() => {
                      remove(field.name);
                    }}
                  />
                </Space>
              ))}

              <Form.Item>
                <Button
                  type="dashed"
                  onClick={() => {
                    add();
                  }}
                  block
                >
                  <PlusOutlined /> Add field
                </Button>
              </Form.Item>
            </div>
          );
        }}
      </Form.List>

      <Form.Item>
        <Button type="primary" htmlType="submit">
          Submit
        </Button>
      </Form.Item>
    </Form>
  );
};

ReactDOM.render(<Demo />, document.getElementById('container'));

从“React”导入React；
从“react dom”导入react dom；
导入“antd/dist/antd.css”；
导入“./index.css”；
从“antd”导入{Form，Input，Button，Space}；
从“@ant design/icons”导入{MinusCircleOutlined，PlusOutlined}；
常量演示=（）=>{
const onFinish=值=>{
log（'接收到的值的形式：'，值）；
};
返回(
{（字段，{add，remove}）=>{
返回(
{fields.map（field=>(
{
删除（字段名称）；
}}
/>
))}
{
添加（）；
}}
块
>
添加字段
);
}}
提交
);
};
ReactDOM.render（，document.getElementById（'container'））；
键有助于识别哪些项目已更改（添加/删除/重新订购）。要为数组中的每个元素提供唯一标识，需要一个键。因此，需要为页面中的所有react元素呈现添加一个唯一键。系统应该是
key={keyName}
@MANISHKUMARCHOUDHARY，但是现在所有项目都有键，问题出在哪里？
console.log（index）
我认为这两个键的值相同。我们也应该避免使用具有重复密钥的组件。问题应该在键值所在的
map（..）
函数中mapped@MANISHKUMARCHOUDHARY，在
map（）内
每个项都有
key={index}
。为什么会出现警告？因为两个
的索引值都相同，所以我检查了我的代码，现在所有元素都有键，但我不知道如何更改代码以使警告消失，你能帮忙吗？首先有一个要求：将索引作为键值传递是一种反模式，它会导致很多问题。请将一些唯一的值传递给key而不是index，然后再次检查。