Блог

Главная - Вопросы по программированию - Reactjs показывает динамическое значение

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

#javascript #reactjs #axios #dropzone.js

#javascript #reactjs #axios #dropzone.js

Вопрос:

Привет, я использую приведенный ниже код для загрузки изображений в 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.log(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 . Как я могу сохранить все ответы без потери какого-либо значения. Спасибо

Комментарии:

1. Введите массив, который содержит состояние для каждой загрузки.

Ответ №1:

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

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