Отображение данных ответа остальных API в реаги - PullRequest
Новая
       4

Отображение данных ответа остальных API в реаги

0 голосов
/ 13 марта 2020

Здесь данные ответа содержат поля {name, details}. У меня есть кнопка загрузки для загрузки одного / нескольких файлов. После загрузки файлов я не обновляю sh страницу. Теперь, например, я загружаю один файл и отображаю ответ. Я снова загружаю 2 файла. Теперь я должен иметь возможность отображать ответ текущей загрузки, а также предыдущую. Он должен быть в следующем формате: 1. Имя1 Детали1 2. Имя2 Детали2 3. Имя3 Детали 3 

          this.state.list = this.state.list.concat(details);
          this.state.list_name = this.state.list_name.concat(name);

             < form onSubmit={this.handleSubmit} >
                <label>
                    Upload a file: <br /><br />
                    <input type="file" name="file" multiple onChange{this.onChangeHandler}/>
                </label>
                <br /><br />
                <button type="submit">
                    Upload</button>
            </form >
            <ol>
               // {this.state.list_name.map((k) =>
                 //   <li>{k} :</li>)}
                //{this.state.list.map((k) =>
                //    <li>{k}</li>

               // )} 
             </ol>


     handleSubmit = (event) => {
        event.preventDefault();

       const formData = new FormData();
       for (var x = 0; x < this.state.selectedFile.length; x++) {
        formData.append('inputFile', this.state.selectedFile[x])

        fetch('url', {
            method: 'POST',
            body: formData
        }).then(res => {
            return res.json()
        })
            .then((res) => {
                this.setState({

                     details: res.data.details,
                    name: res.data.name
                })
                console.log("res data", res)
                //console.log("Data is", res.data.name) //displays name in the console
            })
            .catch(error => console.log('ERROR message'))
    }
  };

Я прокомментировал код, который я пробовал. Заранее спасибо.

1 Ответ

1 голос
/ 13 марта 2020

Вы можете сделать это

удалить это 

this.state.list = this.state.list.concat(details);
this.state.list_name = this.state.list_name.concat(name);

добавить это 

fetch('url', {
            method: 'POST',
            body: formData
        }).then(res => {
            return res.json()
        })
            .then((res) => {
                const list = this.state.list;
                list.concat(res.data.details);
                const list_name = this.state.list_name;
                list_name.concat(name);
                this.setState({
                     list,
                     list_name,
                     details: res.data.details,
                     name: res.data.name
                })
                console.log("res data", res)
                //console.log("Data is", res.data.name) //displays name in the console
            })
            .catch(error => console.log('ERROR message'))
    }
...