javascript - React 中同时设置状态和调用补丁

Question

这不是重复的

我有一个反应组件，我想在单击复选框时更新数据库。我有一个句柄函数来设置状态，还有一个调用函数来获取状态并将其推送到服务器。问题是，我找不到按顺序调用函数的方法。服务器调用在我们更新状态之前运行。这是一个愚蠢的例子。

const [data, setData] = useState([]);


const handleChange = (stuff) => {
  //changing stuff to format

  setData([stuff])
  saveData()
}

const saveData = () => {
 callServer(data)
}

return <ComponentWithCheckBoxes onChange={() => handleChange()}/>

所以我知道这是因为该函数是同步运行的，但我无法找出以特定顺序运行它们的最佳方法。

如果我改为在 useEffect 中运行 api 调用，如下所示：

useEffect(()=> {
  saveData()
}, [data])

const handleChange = (stuff) => {
  //changing stuff to format

  setData([stuff])
  saveData()
}

const saveData = () => {
 callServer(data)
}

然后在初始渲染上调用 saveData 函数，因为初始状态是由 api 调用设置的。

谢谢你的帮助。

标签： javascriptreactjsapiasynchronous