Javascript 为什么我的组件上的密钥不被认为是唯一的？

我制作了一个通过“步骤”输入数映射的函数，我想我已经给了每个组件唯一的键，但控制台不这么说。为什么会这样？ 我在这个项目中遇到的另一个问题是标题字段没有正确更新，但我无法找出原因。这是我的密码

export default function App() {
  //number of steps required
  const [numberOfSteps, setNumberOfSteps] = useState(0);

  //number of steps to array to map through
  const stepsMap = Array.apply(
    null,
    Array(numberOfSteps).fill({ title: "", body: "" })
  );

  //steps array to object
  let stepsObject = { ...stepsMap };

  //updates title text
  const updateTileArray = (index, titleEventData) => {
    const stepsObjectData = { ...stepsObject };
    stepsObject = {
      ...stepsObjectData,
      [index]: { ...stepsObjectData[index], title: titleEventData }
    };
  };

  //updates quill text body
  const updateRichTextArray = (index, richTextEventData) => {
    const stepsObjectData = { ...stepsObject };
    stepsObject = {
      ...stepsObjectData,
      [index]: { ...stepsObjectData[index], body: richTextEventData }
    };
  };

  return (
    <div className="App">
      <TextField
        type="number"
        label="Number of steps"
        value={numberOfSteps}
        InputProps={{ inputProps: { min: 0 } }}
        onChange={(e) => setNumberOfSteps(Number(e.target.value))}
      />
      {stepsMap.map((_, index) => (
        <>
          <Typography key={"heading" + index}>Step: {index + 1}</Typography>
          <TextField
            key={"title" + index}
            type="text"
            label="Title"
            value={stepsObject[index]?.title}
            onChange={(titleEventData) =>
              updateTileArray(index, titleEventData.target.value)
            }
          />
          <ReactQuill
            key={"quill" + index}
            theme="snow"
            value={stepsObject[index]?.body}
            onChange={(richTextEventData) =>
              updateRichTextArray(index, richTextEventData)
            }
          />
        </>
      ))}
    </div>
  );
}

导出默认函数App（）{
//所需的步骤数
常量[numberOfSteps，setNumberOfSteps]=useState（0）；
//要映射到阵列的步骤数
const stepsMap=Array.apply(
无效的
数组（numberOfSteps）.fill（{title:，body:}）
);
//从数组到对象的步骤
设stepsObject={……stepsMap}；
//更新标题文本
const updateTileArray=（索引，标题eventdata）=>{
const stepsObjectData={…stepsObject}；
stepsObject={
…步骤数据，
[索引]：{…stepsObjectData[索引]，标题：titleEventData}
};
};
//更新羽毛笔文本体
const updateRichTextArray=（索引，richTextEventData）=>{
const stepsObjectData={…stepsObject}；
stepsObject={
…步骤数据，
[索引]：{…stepsObjectData[索引]，正文：richTextEventData}
};
};
返回(
setNumberOfSteps（Number（e.target.value））}
/>
{stepsMap.map（（_，索引）=>(
步骤：{index+1}
UpdateLearRay（索引，titleEventData.target.value）
}
/>
updateRichTextArray（索引，richTextEventData）
}
/>
))}
);
}

---

键应该在片段上，您可以这样做：

{stepsMap.map((_, index) => (
        <React.Fragment key={index}>
          <Typography>Step: {index + 1}</Typography>
          <TextField
            type="text"
            label="Title"
            value={stepsObject[index]?.title}
            onChange={(titleEventData) =>
              updateTileArray(index, titleEventData.target.value)
            }
          />
          <ReactQuill
            theme="snow"
            value={stepsObject[index]?.body}
            onChange={(richTextEventData) =>
              updateRichTextArray(index, richTextEventData)
            }
          />
        </React.Fragment>
      ))}

{stepsMap.map（（_，索引）=>(
步骤：{index+1}
UpdateLearRay（索引，titleEventData.target.value）
}
/>
updateRichTextArray（索引，richTextEventData）
}
/>
))}

键应该在片段上，您可以这样做：

{stepsMap.map((_, index) => (
        <React.Fragment key={index}>
          <Typography>Step: {index + 1}</Typography>
          <TextField
            type="text"
            label="Title"
            value={stepsObject[index]?.title}
            onChange={(titleEventData) =>
              updateTileArray(index, titleEventData.target.value)
            }
          />
          <ReactQuill
            theme="snow"
            value={stepsObject[index]?.body}
            onChange={(richTextEventData) =>
              updateRichTextArray(index, richTextEventData)
            }
          />
        </React.Fragment>
      ))}

{stepsMap.map（（_，索引）=>(
步骤：{index+1}
UpdateLearRay（索引，titleEventData.target.value）
}
/>
updateRichTextArray（索引，richTextEventData）
}
/>
))}

首先，您应该使用

传递

键

道具。 其次，关于

标题

，您的代码有两个问题

stepsObject

应该是将处理 重新渲染组件

您应该连接上一个

title

的值以及

updateLearRay

函数中的最新值

---

首先，您应该使用

传递

键

道具。 其次，关于

标题

，您的代码有两个问题

stepsObject

应该是将处理 重新渲染组件

您应该连接上一个

title

的值以及

updateLearRay

函数中的最新值

---

---

这回答了你的问题吗？控制台警告是什么？也许您可以将片段

转换为

或

，并在其上提供

键

。谢谢您对我问题的第二部分有任何回答吗？这是否回答了您的问题？控制台警告是什么？也许您可以将片段

转换为

或

，并在其上提供

键

。谢谢您对我问题的第二部分有任何回答？谢谢您似乎停止了抱怨！但是当我按下任何按钮时，ReactQuill元素似乎仍然会重新启动？你也能找出标题没有正确更新的原因吗？谢谢你，这似乎停止了抱怨！但是当我按下任何按钮等时，ReactQuill元素似乎仍然会重新启动？你能找出标题没有正确更新的原因吗？谢谢你能提供一个我不太明白你的意思的例子吗？

const updateTileArray=（index:number，titleEventData:string）=>{const stepsObjectData={…stepsObject}const titleConcat=stepsObjectData[index].title.concat（titleEventData）stepsObject={……stepsObjectData[index]：{……stepsObjectData[index]，title:titleConcat}，}console.log（stepsObject[index].title）}

这似乎有效，但值没有更新？这是我的新代码，你觉得怎么样？由于某些原因，我的沙盒链接没有发送谢谢你能提供一个我不太明白你的意思的示例吗？

const updateTileArray=（index:number，titleEventData:string）=>{const stepsObjectData={…stepsObject}const titleConcat=stepsObjectData[index].title.concat（titleEventData）stepsObject={…stepsObjectData[index]：{…stepsObjectData[index]，title:titleConcat}，}console.log（stepsObject[index].title）}

这似乎可行，但值没有更新？这是我的新代码，您认为如何？由于某些原因，我的沙盒链接没有发送