Неподдерживаемое значение поля: не определено, функция addDoc() вызывается с неверными данными

поэтому здесь я хочу сохранить массив URL-адресов изображений из хранилища firebase в firestore. Я получаю сообщение об ошибке undefined, поскольку мой ImageUrl не определен. пожалуйста, помогите мне решить эту проблему. Изображения хранятся в облачном хранилище. В приведенном ниже коде показана моя функция onSubmit, в которой создается копия данных формы. Я пробовал с «.then» и без него, и оба дают мне эту ошибку

const onSubmit = async (e) => {
    e.preventDefault();
    setLoading(true);
    if (discountedPrice >= regularPrice) {
      setLoading(false);
      toast.error("Discounted price should be less than regular price");
    }
    console.info(formData);
    if (images.length > 6) {
      setLoading(false);
      toast.error("Max of 6 images");
    }
    let geolocation = {};
    let location;
    // if (address != null) {
    try {
      const response = await fetch(
        `https://maps.googleapis.com/maps/api/geocode/json?address=${address}&key=${process.env.React_App_YOUR_GOOGLE_API_KEY}`
      );
      const data = await response.json();
      console.info(data);
      geolocation.lat = data.results[0].geometry.location.lat;
      geolocation.lng = data.results[0].geometry.location.lng;
      console.info(
        "aaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaaa"
      );
      console.info(geolocation.lat);
      console.info(data.status);
      location =
        data.status == "ZERO_RESULTS"
          ? undefined
          : data.results[0].formatted_address;
      if (location == undefined || location.includes("undefined")) {
        setLoading(false);
        toast.error("area does not match");
      }
    } catch (error) {
      toast.error("area does not match");
    }

    //s store image to firebase
    const storeImage = async (image) => {
      return new Promise((resolve, reject) => {
        const storage = getStorage();
        const fileName = `${auth.currentUser.uid}-${image.name}-${uuidv4()}`;

        const storageRef = ref(storage, "images/" + fileName);
        const uploadTask = uploadBytesResumable(storageRef, image);

        uploadTask.on(
          "state_changed",
          (snapshot) => {
            // Observe state change events such as progress, pause, and resume
            // Get task progress, including the number of bytes uploaded and the total number of bytes to be uploaded
            const progress =
              (snapshot.bytesTransferred / snapshot.totalBytes) * 100;
            console.info("Upload is " + progress + "% done");
            switch (snapshot.state) {
              case "paused":
                console.info("Upload is paused");
                break;
              case "running":
                console.info("Upload is running");
                break;
            }
          },
          (error) => {
            // Handle unsuccessful uploads
            reject(error);
          },
          () => {
            // Handle successful uploads on complete
            // For instance, get the download URL: https://firebasestorage.googleapis.com/...
            getDownloadURL(uploadTask.snapshot.ref).then((downloadURL) => {
              resolve(downloadURL);
              console.info("File available at", downloadURL);
            });
          }
        );
      });
    };

    const imageUrls = await Promise.all(
      [...images].map((image) => {
        storeImage(image);
      })
    )
      .then(() => {
        console.info("urlready " + imageUrls);
        uploadingListings(imageUrls);
      })
      .catch((error) => {
        console.info(error);
        setLoading(false);
        toast.error("Couldn't upload image");
        return;
      });

    const uploadingListings = async (imageUrls) => {
      console.info(imageUrls);
      const formDataCopy = {
        ...formData,
        imageUrls,
        geolocation,
        timestamp: serverTimestamp(),
      };
      formDataCopy.location = address;
      delete formDataCopy.address;
      delete formDataCopy.images;
      !formDataCopy.offer && delete formDataCopy.discountedPrice;
      console.info("this is" + formDataCopy);

      const docRef = await addDoc(
        collection(db, "listings"),
        formDataCopy
setLoading(false);
        toast.success("Created a listing");
        navigate(`/category/${formDataCopy.type}/${docRef.id}`);
      });
    };

Вы пробовали console.info(formDataCopy) и проверить, есть ли какое-либо поле undefined?

Dharmaraj 16.10.2022 07:10

да, imageUrls в undefined... Что я не понимаю, почему это должно быть

Papa Kow Dadson 18.10.2022 12:46
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Навигация по приложениям React: Исчерпывающее руководство по React Router
Навигация по приложениям React: Исчерпывающее руководство по React Router
React Router стала незаменимой библиотекой для создания одностраничных приложений с навигацией в React. В этой статье блога мы подробно рассмотрим...
Массив зависимостей в React
Массив зависимостей в React
Все о массиве Dependency и его связи с useEffect.
0
2
74
1
Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вот как я это исправил. Понял, что не возвращаю URL-адрес imageUrls. А также обнаружил, что использование .then с imageUrls бесполезно.

const imageUrls = await Promise.all(
      [...images].map((image) => {
        return storeImage(image);
      })
    )
      // .then(() => {
      //   console.info("urlready " + imageUrls);
      //   return uploadingListings(imageUrls);
      // })
      .catch((error) => {
        console.info(error);
        setLoading(false);
        toast.error("Couldn't upload listing");
        return;
      });
      console.info("urlready " + imageUrls);
      const formDataCopy = {
        ...formData,
        imageUrls,
        geolocation,
        timestamp: serverTimestamp(),
      };
      console.info(formDataCopy);
      formDataCopy.location = address;
      delete formDataCopy.address;
      delete formDataCopy.images;
      !formDataCopy.offer && delete formDataCopy.discountedPrice;
      console.info("this is" + formDataCopy);

      const docRef = await addDoc(
        collection(db, "listings"),
        formDataCopy
      )
        console.info(docRef);
        setLoading(false);
        toast.success("Created a listing");
        navigate(`/category/${formDataCopy.type}/${docRef.id}`);
      
    
  };

Другие вопросы по теме

Как обновить конкретное поле внутри коллекции и подколлекции?
Как вернуть данные firebase в простой массив
Сделать UID пользователей [Аутентификация] таким же, как у пользователей - база данных firestore
Если я выполню «развертывание firebase» для развертывания только одной новой облачной функции, будут ли удалены более ранние облачные функции, которые были развернуты?
Я пытался получить данные из firestore, но в консоли отображается пустой массив при флаттере
Нужно ли вызывать .isSuccess?
Функция добавляет только один элемент в массив избранного
Flutter & Firestore: как проверить, что фиксация () пакета прошла успешно или нет?
Добавление новых данных во Flutter с помощью Firestore приводит к избыточным данным?
Метод «данные» не может быть вызван безоговорочно, потому что получатель может быть «нулевым». Попробуйте сделать вызов условным (используя '?.'). Как решить?