javascript - 在现有数组中添加数组中的新对象

Question

我的 React 应用程序中使用 hooks 和 es6 有 CRUD 功能。我也在使用 AntDesign 列表组件。在我的添加函数中，第一次添加后，预计它已添加到列表中。

但是在创建另一个数组之后，它只是替换现有的数组。它没有像索引 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 Hook

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

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

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

您可以简单地使用 setter 设置新状态，通过向现有数组添加新的有效负载来更新现有数组。