在现有阵列的阵列中添加新的 object

Question

我使用钩子和 es6 在我的反应应用程序中具有 CRUD 功能。 我也在使用 AntDesign 列表组件。 在我的添加function中，第一次添加后，预计会被添加到列表中。

但是在创建另一个之后，它只是替换了现有的数组。 它没有像索引 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 设置新的 state 通过添加新的有效负载来更新现有数组。

Answer 2

您应该通过isLeaveType.push(payload)推送新数据。

还，

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

对我来说没有意义。 由于setLeaveType是isLeaveType的设置器，因此效果没有理由依赖它。