使用 ReactJS 从 API 获取数据

Question

I want to make simple CRUD functionality which should be the same in my web app, Android app and iOS app.

Therefore, I have in node.js made an API from which I can retrieve a paginated list of all documents, a detail page of each document, and post/put requests to delete and update.

Now I am able to check for administrator rights and other things at these routes. Is this the correct approach?

Now I want to traverse this paginated list and present it with reactjs.

I guess it could be done with

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

but nothing happens (it doesn't even print anything in the console window as i tried in the constructor).

I have this script in a file /components/ItemLister.jsx and I have imported react-15.2.1 and react-dom-15.2.1 . I have installed babel-cli , babel-preset-es2015 , babel-preset-react and set

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

in my package.json .

Answer 1

Issue with {http://item.name}

Put :

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

NOT :

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

Answer 2

Here with Sample code using SWAPI and showing results. Full code: 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

Your issue is at below line.

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

As you using ES6 you no need to use return when returning on the same line. Replace the above code with below one...

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

React recommends using key attribute with unique key value for better performance reconciliation when we insert dynamic nodes using map.