Javascript 我可以分解事件处理程序对象吗？反应

我的组件中有一个名为value from Firebase Realtime db的对象。通过onClick按钮，我想将对象的值加上一个额外的ID（tuid）推回数据库。如何修复它，以便将“suid”和“content”发送回数据库

  function sendMessage(event) {
    // console.log("sendMessage -> event", event.target.value); // <--- is an object
    setWriteError(null);
    try {
      db.ref("messages/toDisplay").push({
        suid: event.target.value.uid,         //<---- .uid fails
        content: event.target.value.content,  //<---- .content fails
        timestamp: Date.now(),
        tuid: user.email, // use email as user uid
      });
    } catch (error) {
      setWriteError(error.message);
    }
  }

函数发送消息（事件）{
//console.log（“sendMessage->event”，event.target.value）；//React使用（通常很快）被置空并返回到事件池。因此，当您将这些事件属性排队到可能稍后处理的结构中时，这些值已被置空


SyntheticEvent
被合并。这意味着
SyntheticEvent
对象将被重用，并且在
已调用事件回调。这是出于性能原因。如
这样，您就不能以异步方式访问事件

您可以保存所需事件属性的本地副本，也可以尝试持久化事件对象

解决方案1-分解事件属性（推荐）
解决方案2-持久化事件对象
注:

如果希望以异步方式访问事件属性，则
应该对事件调用
event.persist（）
，这将删除
池中的合成事件，并允许创建对该事件的引用
由用户代码保留

我不确定我是否理解你的标题与你的帖子的关系？我也不知道这个问题的意思：“我如何修复它，以便我可以将suid和内容发送回db？”哎呀！鉴于我有限的编码经验，我试图尽可能清楚地表达自己的想法；不过，谢天谢地@Drewrece明白了我的意思，所以我能够尝试他的解决方案。非常感谢您的回复@drew！我尝试了这两种方法，但遗憾的是它们都不起作用。我希望分解能起作用。@AngelD您能更具体地说明什么不起作用吗？您能确认吗是否存在事件对象中的已破坏结构的值？我看不出破坏结构失败的原因，除非您正在运行较旧的transpiler。是否存在任何错误？我在控制台“\uu reactEventHandlers$…”中获得此输出：对象{错误：“Reference.push失败：第一个参数在属性'messages.toDisplay.suid'”中包含未定义的子项：“test message”}“当将suid按顺序移动到最后一个位置时，我得到了
previouselement同级：span​​ “_reactEventHandlers$…”：{…}​​​ 子项：“测试消息”​​​ 错误：“Reference.push失败：第一个参数在属性“messages.toDisplay.content”中包含未定义的内容”​​​ : 对象{…}
在
sendMessage
处理程序中，db.ref（“messages/toDisplay”）是什么？
    return (
    <section className="conversation">
      {readError ? readError : ""}
      <Header user={user} />

      {dashboard.map((value, index) => (
        <div key={index}>
          <span error={writeError}>{value.content}</span>{" "}
          <button))}
            onClick={sendMessage}
            value={value}>     {/* {value.content} with event.target.value works */}
            Accepted
          </button> 
          ... </div> ))} </section>

  function sendMessage(event) {
    setWriteError(null);
    try {
      db.ref("messages/toDisplay").push({
        //suid: event.target.value.uid,  <--- problem commented out
        content: event.target.value,   // so no problem
        timestamp: Date.now(),
        tuid: user.email, 
      });
    } catch (error) {
      setWriteError(error.message);
    }
  }

    <section className="conversation">
      {readError ? readError : ""}
      <Header user={user} />

      {dashboard.map((value, index) => (
        <div key={index}>
          <span error={writeError}>{value.content}</span>{" "}
          <button))}
            onClick={sendMessage}
            value={value.content}>   {/*no problem here*/}
            Accepted
          </button> 
          ... </div> ))} </section>

function sendMessage(event) {
  const { value: { content, uid: suid } } = event.target;
  
  setWriteError(null);
  try {
    db.ref("messages/toDisplay").push({
      suid,
      content,
      timestamp: Date.now(),
      tuid: user.email,
    });
  } catch (error) {
    setWriteError(error.message);
  }
}

function sendMessage(event) {
  event.persist();
  
  setWriteError(null);
  try {
    db.ref("messages/toDisplay").push({
      suid: event.target.value.uid,
      content: event.target.value.content,
      timestamp: Date.now(),
      tuid: user.email,
    });
  } catch (error) {
    setWriteError(error.message);
  }
}