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

我试图显示示例API中的数据。目前，我可以在数组中循环，并显示所有标题，例如：

EventTitle1
EventTitle2
EventTitle3
...

这是我的密码：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
}
}
componentDidMount（）{
var th=这个；
this.serverRequest=axios.get（this.props.source）
.then（函数（事件）{
塞斯塔({
数据：event.data
});
})
}
组件将卸载（）{
这是.serverRequest.abort（）；
}
render（）{
变量标题=[]
this.state.data.forEach（项=>{
titles.push（{item.title[0].value}）；
})
返回(
, 
document.getElementById（'容器'）
)；

您只需使用

slice

操作符获取数组的前5个元素，然后直接使用

map

也不需要使用

标题

数组，只需将代码段内联到jsx中即可

守则的重要部分是：

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

{data.slice（0,5）.map（事件=>(
{event.title}
{event.location}
))}

以下是完整的示例：

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
}
}
componentDidMount（）{
var th=这个；
this.serverRequest=axios.get（this.props.source）
.then（函数（事件）{
塞斯塔({
数据：event.data
});
})
}
组件将卸载（）{
这是.serverRequest.abort（）；
}
render（）{
返回(
, 
document.getElementById（'容器'）
)；

创建一个

数组并将其添加到表中

类应用程序扩展了React.Component{
构造函数（）{
超级（）；
此.state={
数据：[]
}
}
componentDidMount（）{
var th=这个；
this.serverRequest=axios.get（this.props.source）
.then（函数（事件）{
塞斯塔({
数据：event.data
});
})
}
组件将卸载（）{
这是.serverRequest.abort（）；
}
render（）{
const contents=this.state.data.forEach（项=>{
//根据API更改标题和位置键
返回
{item.title}
{item.location}
})
返回(
所有事件
活动名称
活动地点
{contents}
);
} 
}
ReactDOM.render(
, 
document.getElementById（“容器”）
)

我只是不想在上面的例子中那样编写代码

我不会使用设置变量来

这个

让我想起了angularjs的旧时代，很多人都这么做了

var vm=this

（视图模型的虚拟机）

需要使用带有箭头函数的现代javascript，并使用

map

而不是

forEach

样本如下：

类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
数据：[]
}
}
componentDidMount（）{
获取（this.props.source）
.然后（（事件）=>{
这是我的国家({
数据：event.data
});
})
}
render（）{
constYourData=this.state.data.map（项=>(
//注意数组，所以这里没有返回，（）而不是{}
//请注意，map代替forEach创建闭包-首选map
{item.title}
{item.location}
})
返回(
, 
document.getElementById（'容器'）
);
//显然，上述方法是有效的，而且是旧的处理方式，这是针对containter的divid的
//我将设置一个api来附加并使用componentDidMount（）{…}
//然后-->导出默认应用程序；

---

事件位置不是来自API？是的，它也来自API。这很好。如何将其限制为仅显示五个最新的事件位置？使用

{contents.slice（0,5）}

而不是

{contents}

在渲染中。@PraneshRavi最好在映射数组之前对数组进行切片。这不是真的。如果需要剩余的值，则无需再次运行

映射

。您可以从缓存中使用数组并从中进行拼接。

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;