Добавление нового объекта в массив в существующем массиве

Question

У меня есть функция CRUD в моем приложении реакции с использованием хуков и es6. Я также использую AntDesign List Component. В моей функции добавления, после добавления в первый раз, ожидается, что он был добавлен в список.

Но после создания другого он просто заменяет существующий массив. Он не был добавлен как индекс 1. Это всегда индекс 0.

Вот мой код

const leaveTypeList = [];
const [isLeaveType, setLeaveType] = useState(leaveTypeList);

useEffect(() => {
  setLeaveType(leaveTypeList);
}, [setLeaveType]);

const payload = {
  leaveTag: values.leaveTag,
  leaveTagColor: values.leaveTagColor,
  hexCode: state.tagColor,
  dateCreated: formatLeaveTypeDate,
};

leaveTypeList.push(payload);
setLeaveType(leaveTypeList);

Answer 1

эй, так как вам нужно добавить новый элемент в массив, нет необходимости использовать ловушку useEffect

const leaveTypeList = [];
const [isLeaveType, setLeaveType] = useState(leaveTypeList);

const payload = {
  leaveTag: values.leaveTag,
  leaveTagColor: values.leaveTagColor,
  hexCode: state.tagColor,
  dateCreated: formatLeaveTypeDate,
};

setLeaveType([...isLeaveType,payload]);

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

Answer 2

Вы должны выдвинуть новые данные на isLeaveType.push(payload).

Также,

useEffect(() => {
  setLeaveType(leaveTypeList);
}, [setLeaveType]);

не имеет смысла для меня. Поскольку setLeaveType является установщиком для isLeaveType, нет никаких причин, по которым эффект зависит от него.