Question

我使用useState Hook在功能组件中更新我的状态。我想在用户单击按钮后将一个对象的状态设置为另一个对象的属性的状态。对象是相同的，但数组中的顺序不同。（用户可以在用户界面中对其进行排序）。

在执行handleSave一次不起作用时，其顺序保持不变。仅在第二次执行该功能时，状态才会更改。

这是我的代码：

**2

初始状态（assetItmes和currentMonList.items）均为：

const [assetItems, setAssetItems] = useState([]);
const [currentMonList, setCurrentMonList] = useState(null);

const handleSave = async () => {
await setCurrentMonList(
  await update(currentMonList, {
    items: {
      $set: assetItems
    }
  })
);
console.log(currentMonList.items);
console.log(assetItems); 
};

执行一次后：（用户对项目进行排序并点击保存） currentMonList.items

0: {id: 1,  …}
1: {id: 2,  …}

assetItems：

0: {id: 1, …}
1: {id: 2, …}

第二次执行后：（均具有正确的值）

0: {id: 2, …}
1: {id: 1, …}

我尝试过：

handleSave的异步函数（仍在提供的代码中）
控制台日志前5秒的超时功能
在状态更新内将$ set更改为$ merge
使用$ set：null调用setCurrentMonList，然后使用$ set：assetItems再次调用

更新：

通过React-DnD进行数组排序。排序在用户界面中有效。并且也在assetItem状态的输出中。

0: {id: 2, …} 
1: {id: 1, …}

Answer 1

用于更新状态的函数不能在内部等待。您可以将其包装在async函数中，但是它本身不能是异步的，因为它应该更新组件的状态。我想这就是为什么只有在第二次触发函数时才得到想要的原因。像这样尝试：

const [assetItems, setAssetItems] = useState([]);
const [currentMonList, setCurrentMonList] = useState(null);

const handleSave = async () => {
await setCurrentMonList({
    items: {
      $set: assetItems
    })
};
console.log(currentMonList.items);
console.log(assetItems); 
};

看看丹·阿布拉莫夫（Dan Abramov）写下的内容：https://github.com/facebook/react/issues/14326

仅在第二次执行时反应更新状态

1 个答案: