В React, как отображать данные из API в таблице HTML?

Question

Я пытаюсь отобразить данные из моего примера API. На данный момент я могу перебрать массив и отображать все заголовки, например:

EventTitle1 
EventTitle2 
EventTitle3 
... 

Вот мой код:

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
var titles = [] 
 
this.state.data.forEach(item => { 
 
    titles.push(<h3 className=”events”>{item.title[0].value}</h3>); 
 
}) 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      {titles} 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);

Как я мог создать таблицу HTML, чтобы отображать только пять последних названий событий из API (а затем и других данных) внутри таблицы?

Например:

return (
    <table> 
     <tr> 
     <th>Event title</th> 
     <th>Event location</th> 
     </tr> 
     <tr> 
     <td>First event title {titles[0]} ?? </td> 
     <td>San Fran</td> 
     </tr> 
     <tr> 
     <td>Second event title {titles[1]} ??</td> 
     <td>London</td> 
     </tr> 
    </table> 
); 

Answer 1

Создать массив <tr> и добавить его в таблицу.

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
const contents = this.state.data.forEach(item => { 
 
     //change the title and location key based on your API 
 
     return <tr> 
 
     <td>{item.title}</td> 
 
     <td>{item.location}</td> 
 
     </tr> 
 
}) 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      <table> 
 
       <tr> 
 
       <th>Event title</th> 
 
       <th>Event location</th> 
 
       </tr> 
 
       {contents} 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);

Answer 2

Вы можете просто использовать оператор slice, чтобы получить первые 5 элементов массива вас, а затем непосредственно использовать map.

Также нет необходимости использовать массив titles, вы можете просто установить фрагмент inline в jsx.

Важной частью кода является:

<table> 
    {data.slice(0,5).map(event => (<tr> 
     <td>{event.title}</td> 
     <td>{event.location}</td> 
    </tr>))} 
</table> 

Вот полный пример:

class App extends React.Component { 
 
constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: [] 
 
    } 
 
} 
 
    
 
componentDidMount() { 
 
var th = this; 
 
this.serverRequest = axios.get(this.props.source) 
 
.then(function(event) { 
 
    th.setState({ 
 
     data: event.data 
 
    }); 
 
}) 
 
} 
 

 
componentWillUnmount() { 
 
    this.serverRequest.abort(); 
 
} 
 
    
 
render() { 
 
return (
 
    <div className=”container”> 
 
     <div className=”row”> 
 
     <div className=”col-md-6 col-md-offset-5"> 
 
      <h1 className=”title”>All Events</h1> 
 
      <table> 
 
       <tr> 
 
        <th>Event title</th> 
 
        <th>Event location</th> 
 
       </tr> 
 
       {this.state.data.slice(0,5).map(event => (<tr> 
 
        <td>{event.title}</td> 
 
        <td>{event.location}</td> 
 
       </tr>))} 
 
      </table> 
 
     </div> 
 
     </div> 
 
    </div> 
 
); 
 
} 
 
} 
 

 
ReactDOM.render(
 
    <App source=”http://localhost:8888/example/api/events" />, 
 
    document.getElementById(‘container’) 
 
);