Что делать, если нет возможности создавать уникальные ключи?

Question

У меня сложный набор данных, поэтому для примера покажу очень упрощенную версию.

Входные данные:

const data = [
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  },
  {
    type: "input",
    caption: "Name",
    defaultValue: "John Smith"
  }
];

Каждый элемент массива съемный. Получается примерно так.

Есть несколько условий. Мне не следует изменять массив данных, поэтому я создаю глубокую копию. Также внутри копии я могу только удалять элементы, но не изменять их свойства. Таким образом, каждый элемент должен иметь локальное состояние с новым значением.

Рабочий пример:

function App() {
  const [mainData, setMainData] = useState(deepCopy(data));

  return (
    <React.Fragment>
      {
        mainData.map((item, i) => {
          return (
            <Input {...item} key={i} num={i} setMainData={setMainData}/>
          )
        })
      }
    </React.Fragment>
  )
}

const Input = (props) => {
  const [value, setValue] = useState(props.defaultValue);

  const deleteElem = () => {
    props.setMainData((mainData) => {
      return [...mainData.filter((_, ind) => ind !== props.num)];
    });
  };

  return (
    <div>
      <div>
        <div>{`${props.caption}:`}</div>
        <input value={value} onChange={(e)=>setValue(e.target.value)}/>
      </div>
      <button onClick={deleteElem}>delete</button>
    </div>
  )
};



const deepCopy = (aObject) => {
  if (!aObject) {
    return aObject;
  }
  let value;
  let bObject = Array.isArray(aObject) ? [] : {};

  for (const key in aObject) {
    value = aObject[key];
    bObject[key] = (typeof value === "object") ? deepCopy(value) : value;
  }

  return bObject;
};

Если вы попытаетесь удалить не последний элемент, то (из-за ключей) значения элементов input будут перепутаны. Что я могу с этим поделать?

Answer 1

Чтобы внести минимальные изменения в свой код - просто никогда не удаляйте элемент в deleteElem, но добавить флаг deleted вместо этого.

При рендеринге элемента показывать <Fragment> для deleted пункт.

Answer 2

С deepCopyвы можете добавить уникальный идентификатор к каждому элементу при инициализации своего состояния. Как только вы это сделаете, вы можете использовать этот идентификатор для передачи в качестве ключа элементу ввода.

import {uuid} from 'uuidv4';
function deepCopyAndAddId = () => {
   let newData = deepCopy(data);
   newData = newData.map((item, index) => ({...item, id: uuid()})); 
}
function App() {
  const [mainData, setMainData] = useState(deepCopyAndAddId);

  return (
    <React.Fragment>
      {
        mainData.map((item, i) => {
          return (
            <Input {...item} key={item.id} num={i} setMainData={setMainData}/>
          )
        })
      }
    </React.Fragment>
  )
}