Javascript 未处理的拒绝（TypeError）：无法读取属性'；防止违约'；未定义的

我不知道如何解决这个问题。。。请帮我，我只是个初学者

  const onSubmit = async (e) => { //Here I submit my form
    e.preventDefault();
    const nickname = e.target.nickname.value;
    if (!nickname || !fileUrl) {
      return;
    }
    await db.collection("request").doc(playerID).set({
      nickname: nickname,
      image: fileUrl,
    });
  };

  useEffect(() => {
    const fetchRequest = async () => {
      const requestCollection = await db.collection("request").get();
      setRequest(
        requestCollection.docs.map((doc) => {
          return doc.data();
        })
      );
    };
    fetchRequest();
  }, []);

返回：

  return (
    <Panel id={id}>
      <Div>
          <FormLayout>
             <Input maxLength="16" top="Введите ваш никнейм" nickname={nickname} onChange={(e) => setNickname(e.target.value)} placeholder="Dit"/>
             <Input  maxLength="8" top="Введите ваш игровой ID" playerID={playerID} onChange={(e) => setPlayerID(e.target.value)} type="tel" placeholder="675"/>
             <Select  top="Категория" value={category} onChange={(e) => setCategory(e.target.value)} placeholder="Выберите категорию скина">
               <option value="Обычные скины">Обычные скины</option>
               <option value="Питомцы">Питомцы</option>
               <option value="Частицы">Частицы</option>
             </Select>
             <File type='file' top="Загрузите ваше фото" onChange={onFileChange} before={<Icon24Camera />} controlSize="l">
          Открыть галерею
        </File>
             <Button mode="commerce" size="xl" onClick={(e) => {onSubmit(); onGoHome();}} data-to="home" >Отправить</Button>
              </FormLayout>
              <ul>
        {request.map((playerID) => {
          return (
            <li key={playerID.nickname}>
              <img width="100" height="100" src={playerID.image} alt={playerID.nickname} />
              <p>{playerID.nickname}</p>
            </li>
          );
        })}
      </ul>
  </Div>
    </Panel>
  );
}

返回(
set昵称（e.target.value）}占位符=“Dit”/>
setPlayerID（e.target.value）}type=“tel”placeholder=“675”/
setCategory（e.target.value）}占位符=“Бщбааааааааааааа
Обычные скины
Питомцы
Частицы
Открыть галерею
{onSubmit（）；onGoHome（）；}}}数据发送到=“home”>

{request.map（（playerID）=>{
返回(

{playerID.昵称}


);
})}

);
}

如果有人能教我。。。我使用Firebase Cloud Firestore进行数据库和存储。

---

我试图找到答案，但我无法

您无法使React事件处理程序

异步

。React使用合成（自定义）事件系统，在处理程序有机会运行之前，事件实例可能会丢失

解决方案：从

onSubmit

中删除

async

，将异步代码提取到新函数中（可能是异步的）：

const handleSubmit=async（昵称）=>{
如果（！昵称| |！文件URL）{
返回；
}
等待数据库收集（“请求”）.doc（playerID）.set({
昵称：昵称，
图片：fileUrl，
});
}
const onSubmit=async（e）=>{//我在这里提交我的表单
e、 预防默认值（）；
const昵称=e.target.nickname.value；
这个.handleSubmit（昵称）；
};

告诉我是否需要更多代码或解释将

e

参数添加到onSubmit调用：

onClick={（e）=>{onSubmit（e）….

我该怎么做？现在我遇到了这个错误：未处理的拒绝（TypeError）：无法读取未定义的“``const昵称=e.target.nickname.value；”``的属性“value”``出于好奇，您试图阻止的默认设置是什么？。您的按钮只是一个普通按钮，它不是submit类型，所以它要做的唯一一件事就是在onClick中输入什么。我很高兴能提供帮助。简短更新：“您不能使React事件处理程序异步”并非100%错误。您可以使它们异步，但随后无法访问事件对象（如经验所示）。