react key相关 关于 map 展示数据时 唯一key的问题

React 

后端给的数组数据，前端需要map展示出来，但是后端没有给 唯一标识 id ,前端该怎么办呢？

import React, { useState } from 'react';

const  TestComp = (） => {
 const list = [
    {
　　   id: '1',
      name: 'name1',
      value: '',
    },
    {
      id: '2'
      name: 'name2',
      value: '',
    },
    {
      id: '3'
      name: 'name3',
      value: '',
    },
  ];
  const [data, setData] = useState(list);

 const deleteFirstHanlde = () => {
    const newdata = JSON.parse(JSON.stringify(data));
    newdata.shift();
    setData(newdata);
  };
 return (
        <div>
            {data.map((item, index)=> (
              <div key={index}>
                {item.name}
                <input type="value" />
              </div>
            ))}
           <div>
              <button onClick={deleteFirstHanlde}>删除第一项 
              </button>
            </div>
          </div>
   );
  };

export default TestComp;

 

 

一、如果只是单纯的展示，不做任何的增加删除操作，那我们可以直接使用 index作为唯一标识

二、如果要做增加删除的操作，我们为什么不能使用 index作为 唯一的标识

（1）假如使用index作为唯一的标识，我们在三个input框里输入随机不同的值，然后点击删除第一项，我们会发现，文本展示是对的，但是input框里面的值 是最后一项没了，而不是第一项没了，因为 input是不受控的

       key = {index }   

 

 

（2）有时候我们会使用index 拼接 某个值来作为 唯一的 key标识。 我们来试一下。 text_${index}  或者 index +1  反正就是 index参与生成的

 key = {index + 3}  跟 key ={index}是一样的结果

 

 

  这张图是  key={`test_${index}`}  跟 key ={index}是一样的结果

 

   这个是 key={item.id}的结果，可以发现是正确的。

 

 

 这个是key={Math.random()}的结果，删除了第一项，但是input框里的值也没了，相当于整个都重新渲染了。所以不用

 

 

 结合上面的就是，最好让后端返回唯一的 id作为唯一标识，如果实在没有，可以自己拿到数据时 往里面自己生成一个唯一的id 然后再map到 页面中。但是 如果后端给的数据很复杂呢，对象数组，而且是多层的，自己使用递归添加也会很麻烦。还有其他方法吗？