在创建多个动态呈现的TextInputs时，努力使用独特的关键道具

import React, { useState } from 'react';

function TextInputContainer() {
  const [textInputs, setTextInputs] = useState([]);

  // 添加新的TextInput
  const addTextInput = () => {
    const newTextInput = {
      id: generateUniqueId(), // 通过生成唯一的id作为关键属性
      value: '',
    };
    setTextInputs([...textInputs, newTextInput]);
  };

  // 更新指定id的TextInput的值
  const updateTextInputValue = (id, value) => {
    const updatedTextInputs = textInputs.map((textInput) => {
      if (textInput.id === id) {
        return {
          ...textInput,
          value,
        };
      }
      return textInput;
    });
    setTextInputs(updatedTextInputs);
  };

  return (
    <div>
      <button onClick={addTextInput}>添加TextInput</button>
      {textInputs.map((textInput) => (
        <input
          key={textInput.id} // 使用唯一的id作为关键属性
          type="text"
          value={textInput.value}
          onChange={(event) => updateTextInputValue(textInput.id, event.target.value)}
        />
      ))}
    </div>
  );
}