使用 ReactJS 从 API 获取数据答案

【问题标题】：Fetch data from API with ReactJS使用 ReactJS 从 API 获取数据
【发布时间】：2016-11-27 17:37:35
【问题描述】：

我想制作简单的 CRUD 功能，在我的网络应用、Android 应用和 iOS 应用中应该是相同的。

因此，我在node.js 中创建了一个 API，我可以从中检索所有文档的分页列表、每个文档的详细信息页面以及要删除和更新的发布/放置请求。

现在我可以在这些路由上检查管理员权限和其他内容。这是正确的方法吗？

现在我想遍历这个分页列表并用 reactjs 呈现。

我想这可以用

import React from 'react';
import ReactDOM from 'react-dom';

export default class ItemLister extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
    console.log('test');
  }

  componentDidMount() {
    fetch('/api/events/').then(result => {
      this.setState({items:result.json()});
    });
  }

  render() {
    return (
      <div>
        <div>Items:</div>
        { this.state.items.map(item => { return <div>{http://item.name}</div>}) }
      </div>
    );
  }
}

ReactDOM.render(<ItemLister/>, document.getElementById('hello-world'));

但是什么也没发生（它甚至没有在控制台窗口中打印任何东西，就像我在构造函数中尝试的那样）。

我在文件/components/ItemLister.jsx 中有这个脚本，并且我已经导入了react-15.2.1 和react-dom-15.2.1。我已经安装了babel-cli、babel-preset-es2015、babel-preset-react 并设置了

"presets": [
  "es2015",
  "react"
]

在我的package.json。

【问题讨论】：

它不会给出错误 - this.setState 是未定义的或等效的。将 catch() 处理程序添加到 fetch() 并检查是否有错误。
试试fetch('/api/events/').then(res=>res.json()).then(items=> this.setState({items}))
和 {"http://"+item.name}

标签： javascript node.js api reactjs

【解决方案1】：

{http://item.name} 的问题

放：

{ this.state.items.map(item =>  <div>http://{item.name}</div>) }

不是：

{ this.state.items.map(item => { return <div>{http://item.name}</div>}) }

【讨论】：

这是因为 ES6 。要么使用return 和{} 要么全部省略.. 无论如何谢谢你:)
我已经尝试了你的建议，但我仍然没有得到任何结果。如果我已经完成了，它不应该在控制台窗口中输出一些东西吗 riggt
检查：stackoverflow.com/questions/2923858/…
我已经尝试使用console.trace("Here I am!")，但我仍然没有得到任何结果。我可能没有正确“激活”脚本。我刚刚将它与<script href="/components/ItemLister.jsx"></script> 一起包含在我的脚本底部。对不对？

【解决方案2】：

您的问题在下面一行。

{ this.state.items.map(item => { return <div>{http://item.name}</div>}) }

当您使用 ES6 时，在同一行返回时无需使用 return。用下面的代码替换上面的代码...

{ this.state.items.map((item,index) => <div key={item.index}>http://{item.name}</div>)}

React recommends 使用具有唯一键值的 key 属性，以便在我们使用 map 插入动态节点时更好地协调性能。

【讨论】：

如果省略 return 但大括号，箭头函数将返回 undefined。

【解决方案3】：

这里是使用 SWAPI 并显示结果的示例代码。完整代码：https://react-vzbqum.stackblitz.io

import React from 'react';
import ReactDOM from 'react-dom';

export default class ItemLister extends React.Component {
  constructor() {
    super();
    this.state = { items: [] };
    console.log('test');
  }

  componentDidMount() {
    fetch('https://swapi.co/api/planets').then(res => res.json()).then(res => {
      console.log(res.results);
      if (res.results && res.results.length > 0) {
        this.setState({items: res.results});
      }
    });
  }

  render() {
    return (
      <div>
        <div>Items:</div>
        { this.state.items.map(item => { return <div>{`http://${item.name}`}</div>}) }
      </div>
    );
  }
}

ReactDOM.render(<ItemLister/>, document.getElementById('hello-world'));

【讨论】：