Javascript 使用ReactJS从API获取数据

我想做一个简单的CRUD功能，在我的web应用程序、Android应用程序和iOS应用程序中应该是一样的

因此，我在node.js中制作了一个API，我可以从中检索所有文档的分页列表、每个文档的详细页面以及删除和更新的post/put请求

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

现在我想遍历这个分页列表，并用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'));

在my package.json中。

与{http://item.name}

付诸表决：

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

不是：

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

---

您的问题在下面一行

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

---

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

这里是使用SWAPI的示例代码并显示结果。 完整代码：

---

它不会给出错误-this.setState未定义或与之等效。添加捕获处理程序以获取并检查是否存在错误。请尝试获取“/api/events/”。thenres=>res.json.thenitems=>this.setState{items}和{http://+item.name}这是因为ES6。使用return&{}或省略all。。不管怎样，谢谢你：我已经试过你的建议了，但还是没有结果。如果我已经正确地完成了，它不应该在控制台窗口中输出一些东西吗检查：我已经尝试过使用console.traceHere！，但我还是没有得到任何结果。我可能没有正确地“激活”脚本。我刚刚把它包括在我的脚本底部。如果省略了return而忽略了大括号，那么arrow函数将返回undefined。

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

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