Получение Json с использованием Axios и перебор данных в ReactStrap Table - PullRequest
Новая
       8

Получение Json с использованием Axios и перебор данных в ReactStrap Table

0 голосов
/ 23 декабря 2018

Я пытаюсь получить данные из jsonplaceholder через axios, выполнить итерацию по этим данным и поместить эти данные в таблицу реактивной ленты.Я получаю ошибку: Expected an assignment or function call and instead saw an expression.Я не совсем уверен, что я делаю здесь не так.Любая помощь очень ценится.

Вот мой код: 

render() {
    const data = axios.get("https://jsonplaceholder.typicode.com/todos")
      .then(response =>
        this.data = response.data,
        this.data.forEach((item) => {
          <tr>
            <td>{item.userId}</td>
            <td>{item.id}</td>
            <td>{item.title}</td>
            <td>{item.completed}</td>
          </tr>
        })
      )
    return (
      <div className="App">
        <header className="App-header">
          <Table>
            <thead>
              <tr>
                <th>
                  User ID
                </th>
                <th>
                  ID
                </th>
                <th>
                  Title
                </th>
                <th>
                  Completed
                </th>
              </tr>
            </thead>
            <tbody>
              {
                data
              }
            </tbody>
          </Table>
        </header>
      </div>
    );
  }
}

Ошибка, при которой я пытаюсь создать теги строки <tr> в моей переменной data.

Ответы [ 2 ]

0 голосов
/ 23 декабря 2018

Ошибка здесь: 

axios.get('https://jsonplaceholder.typicode.com/todos').then(response => {
  console.log(response);
  this.setState({
    todos: response.data, // you have it as this.data not response
  });
});
0 голосов
/ 23 декабря 2018

Вы должны использовать методы жизненного цикла, чтобы загрузить свои данные из API и сохранить их в состоянии и отобразить их при обновлении состояния.

Попробуйте это 

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

class Example extends Component {

  constructor(props) {
    super(props);

    this.state = {
      todos: []
    }
  }

  componentDidMount() {
    axios.get("https://jsonplaceholder.typicode.com/todos")
      .then(response => {
        this.setState({
          todos: this.data
        });
      })
  }

  render() {
    const { todos = [] } = this.state;
    return (
      <div className="App">
        <header className="App-header">
          <Table>
            <thead>
              <tr>
                <th>User ID</th>
                <th>ID</th>
                <th>Title</th>
                <th>Completed</th>
              </tr>
            </thead>
            <tbody>
            {todos.length ? 
              todos.map(todo => (
                <tr>
                  <td>{todo.userId}</td>
                  <td>{todo.id}</td>
                  <td>{todo.title}</td>
                  <td>{todo.completed}</td>
                </tr>
              ))
              : 
              (<tr>
                <td>-</td>
                <td>-</td>
                <td>-</td>
                <td>-</td>
              </tr>)
            }
            </tbody>
          </Table>
        </header>
      </div>
    );
  }
}

export default Example;
...