Клонируйте или дублируйте объект из массива, затем нажмите и переименуйте, используя es6

Question

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

Вот мой код

const [state, setState] = useState({
  formList: []
})

const handleDuplicateItem = id => {
  const duplicateSource = [...state.formList];
  const duplicateItem = duplicateSource.find(item => item.id !== id);
  duplicateSource.push(duplicateItem);

  setState({
    ...state,
    formList: [duplicateSource],
  });
};

<FormItemList
  dataSource={state.formList}
/>

Answer 1

Вы хотите, чтобы копия находилась рядом с копируемым элементом (обратите внимание, что теперь у вас есть дубликаты идентификаторов, и вы больше не можете отображать данные в jsx без предупреждения).

Для этого можно использовать команду Reduce. :

const handleDuplicateItem = id => {
  setState({
    ...state,
    formList: state.formList.reduce((result, item) => {
      if (item.id === id) {
        //push an extra shallow copy of the item to result
        result.push({ ...item });
      }
      result.push(item);
      return result;
    }, []),
  });
};