未处理的拒绝（TypeError）：无法读取未定义的属性“preventDefault”

Question

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

  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>
  );
}

如果有人教我，我会很高兴...我使用 Firebase Cloud Firestore 进行数据库和存储。 我试图找到答案，但我找不到

Answer 1

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

https://reactjs.org/docs/events.html#event-pooling

解决方案：从onSubmit 中删除async，将异步代码提取到一个新函数中（可能是异步的）：

const handleSubmit = async (nickname) => {
    if (!nickname || !fileUrl) {
      return;
    }
    await db.collection("request").doc(playerID).set({
      nickname: nickname,
      image: fileUrl,
    });
}

const onSubmit = async (e) => { //Here I submit my form
    e.preventDefault();
    const nickname = e.target.nickname.value;
    this.handleSubmit(nickname);
  };