Как передать данные в переменную из useState после загрузки изображений?

Question

[viktorleg]

Я застрял с этой простой задачей, потому что мозги перестали уже соображать, да и новичок в кодировании.

Подскажите, как мне добавить массив идентификаторов в variables: { gallery } после загрузки изображений.

const [ multipleUploadMutation, { data } ] = useMutation(MULTIPLE_UPLOAD_MUTATION);

const [gallery, setGallery] = useState([]);

useEffect(() => {
    console.log(gallery);
},[gallery]);

// деструктурирование идентификаторов загруженных изображений для передачи их в setGallery.
const images = data?.multipleUpload.map(({data}) => Number(data.id));

// загрузка изображений из инпута
const onChange = ({ target: { validity, files } }) => {
    if (validity.valid) {
        multipleUploadMutation({ 
            variables: { 
                files: files,
            },
        });
    }
}; 

const handleSubmit = (e) => {
    e.preventDefault();
    setGallery(images); // Понимаю, что это должно находиться не здесь, так как вызывается одновременно с добавлением в переменную gallery и соотвественно ничего в него не передаёт.
    createProduct({
        variables: {
            input: {
                title: title,
                gallery: gallery
            }
        },
    });
};

Comments

[Антон Горецкий]

Не вникал глубоко в ваш код, но суть в следующем: у вас есть 2 состояния - изображения незагружены/загружены - значит делаете примерно
const [imgDidLoad, setDidLoad] = useState(false);
когда изображения загрузятся вызовите setDidLoad(true)
Добавьте еще один useEffect с зависимостью от imgDidLoad и в нем вызывайте setGallery(images)

useEffect(() => {
    setGallery(images);
},[imgDidLoad]);