React组件已设置key仍报不唯一警告？步骤标题输入无法正常更新

key不唯一警告的触发原因 #

你在stepsMap.map的回调中，直接用<></>（React.Fragment短语法）作为遍历返回的根节点，但没有给这个根节点设置唯一key。

• React的diff算法要求，map遍历返回的每一个根级元素必须携带唯一稳定的key，用来在列表更新时区分不同的遍历项。
• 你之前给Fragment内部的Typography、TextField、ReactQuill组件设置的key，是这些子元素自身的属性，无法替代map遍历根节点的key要求，因此控制台会抛出key不唯一的警告。
• 修复方法：因为短语法<></>不支持传属性，需要替换为带key的完整Fragment写法，例如<React.Fragment key={index}>，把三个输入组件包裹在这个带key的Fragment内部即可。

标题输入无法正常更新的触发原因 #

你当前存储步骤内容（标题、富文本正文）的stepsObject是函数内部的普通局部变量，完全没有接入React的状态管理：

• 当你在输入框的onChange回调里修改stepsObject的值时，只是修改了普通JS变量，并不会触发组件重渲染。UI永远只会显示组件第一次渲染时stepsObject里存储的空字符串，视觉上就会表现为输入框不响应输入、内容无法更新。
• 代码里还有一个隐藏问题：生成stepsMap时用了Array(numberOfSteps).fill({ title: "", body: "" })的写法，这种写法会让数组内的每一项都指向同一个对象引用，就算后续把状态接入useState，也会出现修改一个步骤的内容、所有步骤内容同步变化的bug。

正确实现的核心要求 #

• 所有和UI绑定的步骤数据，必须通过useState管理，修改数据时调用对应setState方法触发组件重渲染。
• 生成初始步骤数组时，为每一项生成独立的对象，不要共用同一个对象引用。
• map遍历渲染时，给每一次回调返回的根级元素设置唯一稳定的key，不要把key设置在根元素的内部子节点上。

内容的提问来源于stack exchange，提问作者lukeet