Reactjs 在调用状态设置程序之前修改状态

我有一个表单，其中有一个输入，它接受一些值，向后端发送创建新实体的请求，并通过向项目集合添加新值来更新前端

在表单提交时执行的处理程序：

const handleItemInsert = async (item: any): Promise<void> => {
    console.log('BEFORE ITEM CREATE', items);

    const newItem: IItem = await service.addNewItemAsync(item);

    console.log('AFTER ITEM ADD', items);
    console.log(newItem);

    setItems((items) => [...items, newItem]);
}

constHandleItemInsert=async（项：任意）：Promise=>{
console.log（'项目创建之前'，项目）；
const newItem:IItem=wait service.addnewitemsync（item）；
console.log（'在项目添加之后'，项目）；
console.log（newItem）；
setItems（（items）=>[…items，newItem]）；
}

我的问题是我第一次添加一个新项目时，甚至在调用服务之前，状态都会以某种方式被修改（将

newItem

添加到

items

集合）。此外，新项目被添加了两次，我不知道为什么。我检查过的每个相关函数都会被调用一次，无论是否使用

StrictMode

，我都会遇到这个问题，因此问题不应该基于此

问题的关键

我已经在函数调用中放置了日志，以反映流中的问题（您可以在codesandbox控制台窗口中检查它们）。我可能遗漏了一些非常琐碎的东西，但在这一点上，我真的不知道错误在哪里

此外，如果问题在于通过antd的

onFinish

方法处理表单提交本身（因为我正在传递一个异步方法），那么它仍然应该在日志之后执行更新逻辑，并且不要添加两次项

---

任何帮助都将不胜感激。

因为您的服务正在改变

项

并且您将该值设置为状态，所以您无意中修改了React的状态

在设置项目时更新效果以创建项目的浅层副本：

  useEffect(() => {
    async function fetchItems() {
      console.log("FETCH ITEMS CALLED.");

      const items = await service.getAllItemsAsync();

      console.log("INITIAL ITEMS", items);

      setItems([...items]);
    }

    fetchItems();
  }, []);

---

从真实服务迁移到模拟服务，我没有返回数据的副本，而不是服务本身中的实际对象。非常感谢你！