Дублировать функцию же ключ строки - PullRequest
Новая
       5

Дублировать функцию же ключ строки

0 голосов
/ 27 октября 2019

Я создаю дублирующую функцию, но получаю ошибку ниже. Я использую компонент Table с помощью AntDesign. Как я могу сделать его уникальным?

Обнаружены двое детей с одним и тем же ключом, 0. Ключи должны быть уникальными, чтобы компоненты сохраняли свою идентичность при обновлении. Неуникальные ключи могут стать причиной дублирования и / или отсутствия дочерних элементов - поведение не поддерживается и может измениться в будущей версии.

Вот мой код 

const duplicateEmployeeRow = async key => {
  let duplicateEmployeeSource = [...isEmployeeData];

  let duplicateItem = duplicateEmployeeSource.find(item => item.key == key);

  duplicateEmployeeSource.push(duplicateItem);
  setEmployeeData(duplicateEmployeeSource);
};

Ответы [ 3 ]

1 голос
/ 27 октября 2019

Вы, кажется, находите элемент из массива и помещаете его обратно в массив с тем же свойством ключа и (если вы знаете), если вы используете этот ключ для рендеринга элементов DOM в ключах цикла, они должны быть уникальными.

Вы должны использовать что-то более надежное в производственных целях, но для тестирования с использованием Math.floor(Math.random() * 100000) в сочетании с уникальной ключевой подпоркой из клонированного объекта должна быть довольно малая вероятность того, что несколько элементов DOM будут отображаться с одним и тем же ключом. , если вы не клонируете один и тот же объект много раз. 

const duplicateEmployeeRow = async key => {
  //not mutating so no need for a temp array
  let duplicateItem = isEmployeeData.find(item => item.key == key);
  duplicateItem.key = key + Math.floor(Math.random() * 100000) //better to use an actual unique identifier in production

  // use spread operator to avoid mutation and add new item
  setEmployeeData([...isEmployeeData , duplicateItem);
};
1 голос
/ 27 октября 2019

Без какого-либо контекста, как генерируются ключи и т. Д., Вы можете сгенерировать уникальный ключ с помощью uuid или, я думаю, просто назначьте длину массива prev.

Обратите внимание, чтоСледующий код скрывает потенциальную ошибку, из-за которой компонент не будет отображаться из-за поверхностного сравнения с предыдущим состоянием, которое содержит ту же ссылку. 

duplicateEmployeeSource.push(duplicateItem);

// May not render the component because you mutated the state.
setEmployeeData(duplicateEmployeeSource);

Поэтому вам необходимо сгенерировать новый ключ и изменить состояние: 

const duplicateEmployeeRow = async key => {
  const duplicateEmployeeSource = [...isEmployeeData];
  const duplicateItem = duplicateEmployeeSource.find(item => item.key === key);

  // or active the uuid() function
  duplicateItem.key = duplicateEmployeeSource.length;

  setEmployeeData(dup => [...dup, duplicateItem]);
};
0 голосов
/ 27 октября 2019

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

let duplicateEmployeeSource = [...isEmployeeData];

let duplicateItem = duplicateEmployeeSource.find(item => item.key === key);

const count = state.isEmployeeRowKey;

  setState({
    ...state,
    isEmployeeRowKey: count + 1,
  });

  const payload = {
    key: state.isEmployeeRowKey,
    sfMember: duplicateItem.sfMember,
    leaveType: duplicateItem.leaveType,
    startDate: duplicateItem.startDate,
    startTime: duplicateItem.startTime,
    endDate: duplicateItem.endDate,
    endTime: duplicateItem.endTime,
  };

  setEmployeeData([...isEmployeeData, payload]); 
};
...