Reactjs показывает динамическую ценность

Привет, я использую приведенный ниже код для загрузки изображений в Cloudinary.

import React, { Component } from 'react';
import './App.css';
import Dropzone from 'react-dropzone';
import axios from 'axios';
const FETCH_URL = `https://res.cloudinary.com/${USER_NAME}/image/fetch`;
const options = 'w_300';

export const getUrl = (url, options = '') => {
  return `${FETCH_URL}/${options}${encodeURIComponent(url)}`;
};
class App extends Component {
  state = {
    image: null,
    upload: null,
    number: '',

  };
  handleDrop = (files) => {
    // Push all the axios request promise into a single array

    this.setState({ number: files.length });
    const uploaders = files.map(file => {
      // Initial FormData
      const formData = new FormData();
      formData.append('file', file);
      formData.append('tags', 'codeinfuse, medium, gist');
      formData.append('upload_preset', 'fake'); // Replace the preset name with your own
      formData.append('api_key', '444445'); // Replace API key with your own Cloudinary key
      formData.append('timestamp', (Date.now() / 1000) | 0);

      // Make an AJAX upload request using Axios (replace Cloudinary URL below with your own)
      return axios.post('https://api.cloudinary.com/v1_1/what/upload', formData, {
        headers: { 'X-Requested-With': 'XMLHttpRequest' },
      }).then(({ data }) => {
        const fileURL = data.secure_url; // You should store this URL for future references in your app
        this.setState({ upload: fileURL });
      });
    });
    // Once all the files are uploaded 
    axios.all(uploaders)
      .then(() => {
        return getUrl(this.state.upload, options);
      })
      .then(photo => this.setState({ image: photo }));
  }
  render() {
   console.info(this.state.upload)
    return (
      <div className = "App">
        <Dropzone
          onDrop = {this.handleDrop}
          multiple
         accept = "image/*"
        >
          <p>Drop your files or click here to upload</p>
        </Dropzone>
        <br />
        {this.state.upload}
      </div>
    );
  }
}

export default App;

Я включил загрузку нескольких файлов в dropzone. Загрузка файлов в Cloudinary работает так же хорошо. Но проблема в том, что когда я загружаю более одного файла, он генерирует более одного ответа, и значение изменяется. Как видите, я сохраняю ответы на состояние как this.state.upload. Как я могу сохранить все ответы, не теряя значения. Спасибо

Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
Поведение ключевого слова "this" в стрелочной функции в сравнении с нормальной функцией
В JavaScript одним из самых запутанных понятий является поведение ключевого слова "this" в стрелочной и обычной функциях.
Концепция локализации и ее применение в приложениях React ⚡️
Концепция локализации и ее применение в приложениях React ⚡️
Локализация - это процесс адаптации приложения к различным языкам и культурным требованиям. Это позволяет пользователям получить опыт, соответствующий...
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
Улучшение производительности загрузки с помощью Google Tag Manager и атрибута Defer
В настоящее время производительность загрузки веб-сайта имеет решающее значение не только для удобства пользователей, но и для ранжирования в...
Безумие обратных вызовов в javascript [JS]
Безумие обратных вызовов в javascript [JS]
Здравствуйте! Юный падаван 🚀. Присоединяйся ко мне, чтобы разобраться в одной из самых запутанных концепций, когда вы начинаете изучать мир...
Система управления парковками с использованием HTML, CSS и JavaScript
Система управления парковками с использованием HTML, CSS и JavaScript
Веб-сайт по управлению парковками был создан с использованием HTML, CSS и JavaScript. Это простой сайт, ничего вычурного. Основная цель -...
JavaScript Вопросы с множественным выбором и ответы
JavaScript Вопросы с множественным выбором и ответы
Если вы ищете платформу, которая предоставляет вам бесплатный тест JavaScript MCQ (Multiple Choice Questions With Answers) для оценки ваших знаний,...
0
1
51
1

Ответы 1

Вы можете установить состояние следующим образом:

state = {
    imageList: [],
    ...
}
....
handleDrop = () => {
    ...
    axios.all(...).then(photo => this.setState({ imageList: [...this.state.imageList, photo] }))
}

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