Блог

Переход в отладчик инструментов разработчика показывает 2 проблемы:

1. Не удается прочитать свойство .тогда неопределенного
2. Это также показывает, что эти ДВА файла «помещаются» в хранилище 2 отдельных экземпляра, что, по моему мнению, приводит к тому, что диспетчер addProductStart также запускается дважды. перемещение набора productthumbnail((prevState)… вниз по строке удаляет .затем неопределенная ошибка, но также приводит к тому, что addProductStart запускается дважды. В результате вместо 1 продукта с несколькими изображениями было изготовлено 2 продукта с несколькими изображениями.

Поэтому, чтобы решить эту проблему, функцию handleSubmit необходимо преобразовать в то место, где getDownloadURL может помещать 2 URL-адреса в массив, и установить в состояние productThumbnail, чтобы продукты можно было загружать с несколькими изображениями, прикрепленными в коллекции Firestore

 const productImgHandler = (e) => {
        for (var i = 0; i < e.target.files.length; i  ) {
            const selectedFiles = e.target.files[i];
            selectedFiles["id"] = Math.random();
            setpreProductThumbnail((prevState) => [
                ...prevState,
                selectedFiles,
            ]);
            console.log(selectedFiles);
        }
    };
const handleSubmit = (e) => {
        const promises = [];
        e.preventDefault();
        preproductThumbnail.map((image) => {
            promises.push(storage().ref(`prodimages/${image.name}`).put(image));
            storage()
                .ref(`prodimages/${image.name}`)
                .put(image)
                .on(
                    "state_changed",
                    (snapshot) => {
                        const progress =
                            (snapshot.bytesTransferred / snapshot.totalBytes) *
                            100;
                        console.log(progress);
                    },
                    (err) => {
                        setError(err.message);
                    },
                    
                     () => {
                         storage()
                            .ref("prodimages")
                            .child(image.name)
                            .getDownloadURL()
                            setProductThumbnail((prevState) => [...prevState, productThumbnail])
                            .then((productThumbnail) => { // put an array in here, then change fetch function on Productpage
                                    console.log("PRODTHUMB2", productThumbnail);

                                dispatch(
                                    addProductStart({
                                        productCategory,
                                        productName,
                                        productThumbnail,
                                        productPrice,
                                        productDesc,
                                    })
                                );
                            }, resetForm());
                    }
                );
        });```
 

setProductThumbnail не возвращает обещание, чтобы затем .then() выполнить цепочку обещаний. Вместо этого вы должны обрабатывать setProductThumbnail внутреннюю .then() часть инструкции.