使用 Axios 获取 Json 并在 ReactStrap Table 中迭代数据

Question

我正在尝试通过 axios 从 jsonplaceholder 获取数据并迭代该数据并将该数据放入 reactstrap table。我收到错误：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>
    );
  }
}

错误是我尝试在我的 data 变量中创建 table 行 <tr> 标签。

Answer 1

您应该使用生命周期方法从 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;

Answer 2

错误在这里：

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
  });
});

使用 Axios 获取 Json 并在 ReactStrap Table 中迭代数据

Getting Json using Axios and iterating over data in ReactStrap Table

reactjs

axios

reactstrap