在 React 中，如何在 HTML 表格中顯示來自 API 的數據？

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數組，您只需將代碼片段內聯到 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') );

Answer 3

我只是不會在上面的例子中那樣編碼。

1. 我不會使用設置變量， this讓我想起了 angularjs 的過去，很多人都這樣做var vm = this (vm for view model)

2. 需要使用帶有箭頭函數的現代 javascript 並使用map而不是forEach

   示例如下：

    class App extends React.Component { constructor(props) { super(props); this.state = { data: [] } } componentDidMount() { axios.get(this.props.source) .then((event) => { this.setState({ data: event.data }); }) } render() { const yourData = this.state.data.map(item => ( // notice array so no return here , ( ) instead of { } // notice also map instead of forEach creates a closure - map is preferred <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> {yourData} </table> </div> </div> </div> ); } } ReactDOM.render( <App source=”http://localhost:8888/example/api/events" />, document.getElementById('container') ); // above obviously works and old way of doing things, and that is for a div id of containter // I would setup an api to append to and use the componentDidMount() {... } // then --> export default App;