为什么我的组件上的键不被认为是唯一的？

Question

我制作了一个 function 映射通过“步数”输入的数量，我想我已经为每个组件提供了唯一的键，但控制台另有说明。 为什么是这样？ 我在这个项目中遇到的另一个问题是标题字段没有正确更新，但我不知道为什么。 这是我的代码。

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>
  );
}

代码沙箱

Answer 1

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

{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>
      ))}

Answer 2

首先你应该使用<React.Fragment>来传递key prop。 其次，您的代码在title方面有两个问题。

1. stepsObject应该是一个 state 变量，它将处理组件的重新渲染。
2. 您应该将title的先前值与updateTileArray function 中的最新值连接起来。