使用 Axios 获取 Json 并迭代 ReactStrap Table 中的数据答案

【问题标题】：Getting Json using Axios and iterating over data in ReactStrap Table使用 Axios 获取 Json 并迭代 ReactStrap Table 中的数据
【发布时间】：2018-12-24 03:03:41
【问题描述】：

我正在尝试通过axios 从jsonplaceholder 获取数据并迭代该数据并将该数据放入reactstrap 表中。我收到错误消息：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 变量中创建表格行<tr> 标记。

【问题讨论】：

标签： reactjs axios reactstrap

【解决方案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;

【讨论】：

对！最近用的东西太多了。 todos = [] 出现 unexpected token 错误。任何线索为什么会这样？
这个解决方案似乎有一些错误，我将 todos 变量更改为 todos:[] 并修复了该令牌问题，但由于某种原因我现在使用 axios 得到 Cannot read property 'get' of undefined
如果您在文件顶部导入axios，则不会出现该错误。
我已经导入了它，但是我在tbody 区域周围得到了Cannot read property 'length' of undefined
可能是API响应不对。尝试像这样安全地解构const { todos = [] } = this.state;

【解决方案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
  });
});

【讨论】：

非常感谢。我不得不接受另一个答案，但我非常感谢您的帮助