react循环生成内容修改循环次数后渲染内容错误

react循环生成内容修改循环次数后渲染内容错误

 之前写了一段类似于这样的功能代码，可以通过btn添加或删除一行显示，但有个奇怪的现象，在点击第一行删除时，虽然少了一行，但第一行还在，最后一行不见了。并且查看数据后确定数据没有问题。

 const [values, setValues] = useState<{ title: number，id:stirng }[]>([]);
 return (
    <>
      <Button
          onClick={() => {
             const tempValues = cloneDeep(values);
             tempValues.unshift({id:'...',title: new Date().getTime() });
              setValues(tempValues);
          }}
       >
            add
       </Button>
       {values.map((value, index) => (
            <div key={index}>
                <Button
                    onClick={() => {
                        const tempValues = cloneDeep(values);
                        tempValues.splice(index, 1);
                        setValues(tempValues);
                    }}
                >
                    delete
                    </Button>
                    <InputNumber value={value.title} style={{ width: '100%' }} />
                </div>
         ))}
    </>
);

 最后发现时key的原因，使用了index作为循环的key。推测是因为index会重复，所以react有可能判断无需重新渲染。把循环key由index改为id后解决了问题。