Question

我尝试显示示例API中的数据。目前，我能够遍历数组，并显示所有标题，例如：

EventTitle1
EventTitle2
EventTitle3
...

这是我的代码：

＆＃13;

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

＆＃13;

我怎样才能创建一个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>数组并将其添加到表中。

＆＃13;

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

＆＃13;

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>

以下是完整示例：

＆＃13;

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

＆＃13;

Answer 3

我只是不会在上述示例中进行编码。

我不会使用将变量设置为this来提醒我angularjs的旧时代，很多人都这样做过var vm = this（视图模型的vm）

需要使用带有箭头功能的现代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;

在React中，如何在HTML表格中显示来自API的数据？

3 个答案: