Как отобразить таблицу на домашней странице в React JS? - PullRequest
Новая
       5

Как отобразить таблицу на домашней странице в React JS?

0 голосов
/ 26 февраля 2020

У меня есть класс . js, который должен выводить таблицу из axios.get ('api/info/GetTableList '). Но это др aws это на новой странице. Как отобразить таблицу на главной странице? 

import React, { Component } from 'react';
import axios from 'axios';

export class Info extends Component {
    static displayName = Info.name;

    constructor(props) {
        super(props);
        this.state = { data: [] };}

    componentDidMount() {
        axios.get('api/info/GetTableList ').then((res) => {
            this.setState({ data: res });
        })
    }
    render() {
        return (
            <div>
                <table>
                    <thead>
                        <tr>
                            <th>ID</th>
                            <th>IP</th>
                            <th>WRO</th>
                        </tr>
                    </thead>
                    <tbody>
                        {this.state.data.map(function (item, key) {
                            return (
                            <tr>
                                <td>{item.id}</td>
                                <td>{item.ip}</td>
                                <td>{item.wro}</td>
                            </tr>
                            )
                        })}
                    </tbody>
                </table>
            </div>
        );
    }
}

Ответы [ 2 ]

0 голосов
/ 26 февраля 2020

Вы можете использовать выборку из топора ios

async componentDidMount() {
   const res = await fetch(`api/info/GetTableList`)
   const data = await res.json();
   this.setState({
      data
   })
}

или можете использовать так. 

async componentDidMount() {
    await fetch(
              `api/info/GetTableLis`,
              {
                method: "GET",
              }
            )
              .then(data => data.json())
              .then(data => {
                this.setState({
                  data
                });
              }),
}
0 голосов
/ 26 февраля 2020

Проблема здесь в том, что ax ios вернет объект ответа, вам нужно получить data из response

componentDidMount() {
    axios.get('api/info/GetTableList ').then(({data=[]}) => {
        this.setState({ data});
    })
}

Я использовал сокращенный синтаксис, вы можете использовать обычный синтаксис 

componentDidMount() {
    axios.get('api/info/GetTableList ').then((res) => {
        this.setState({ data : res.data});
    })
}

Также, пожалуйста, попробуйте зарегистрировать res как 

componentDidMount() {
    axios.get('api/info/GetTableList ').then((res) => {
        console.log(res);
        this.setState({ data : res.data});
    }).catch(console.error)
}

, пожалуйста, поделитесь всем консольным журналом

...