使用 ReactJS 從 API 獲取數據

Question

我想制作簡單的 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和 set

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

在我的package.json 。

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

Answer 2

這里有使用 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'));

Answer 3

你的問題在下面。

{ 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 插入動態節點時， React 建議使用具有唯一鍵值的鍵屬性以獲得更好的性能協調。