Javascript 如何在React中使用onClick方法中的同步和异步函数

我有一个反应组分处于这种状态

const [name, setName] = useState('')
const [comment, setComment] = useState('')
const [notes, setNotes] = useState([])

此函数处理输入元素以填充订单

const handleComments = () => {
 setNotes([...notes, {
  name,
  comment
 }])
 setName('')
 setComment('')
}

此函数将信息发送到服务器

const update = async () => {
 const newNotes = notes.map(note => ({
  name,
  comment 
 }))
 return updateNotesPromise(newNotes)
}

这里我有一个按钮，必须执行这两个功能

<Button onClick={} /> 

---

我如何创建一个通过onClick方法传递并执行handleComments的函数，以便将信息加载到DOM中，然后在该信息到达后，执行更新函数并将订单信息保存到DB中？

看起来您正在使用功能组件，因此，您可以创建useEffect，以便在notes更新时发出API put请求：

useEffect(()=> {
  updateNotesPromise(notes); 
},[notes])

---

我假设updateNotesPromise是一个函数，可以调用您的请求？还不清楚为什么newNotes是从notes映射而来的，或者为什么更新是异步的，而不等待任何东西。您的onClick只会触发handleNotes（我假设这是您的提交按钮）。

以下是一种处理组件更新和服务器与错误处理通信的方法：

const onButtonClicked=useCallback（异步（名称、注释）=>{
//缓存旧笔记
const oldNotes=[…notes]；
//更新的说明
const newNotes=[…notes{
名称
评论
}];
//更新组件并假设数据库保存成功
设置注释（新注释）；
试一试{
//将数据更新到数据库
等待更新承诺（新注释）；
}捕获（ex）{
//出现问题时，请将笔记回滚到以前的状态
设置注释（旧注释）；
}
}，[注]；