使用 shorthand 从数组打印数据

Question

我正在使用 react-admin 框架，我正在尝试从我的 array 打印数据。我的 array 看起来像这样：

enter image description here

如您所见，它目前有 3 个索引。他们每个人都存储不同的数据。我想将这些数据打印到同一页上。

我知道我需要使用某种循环 (for, foreach)，但我真的不知道如何在 shorthand.[=19 中实现它=]

这是我的代码，我需要循环：

ID: {this.state.source[index].Id}<br></br>
AuditDate: {this.state.source[index].AuditDate}<br></br>
UserId: {this.state.source[index].UserId}<br></br>
Resource: {this.state.source[index].EntitySet}<br></br>
Entity1: {this.state.source[index].Entity1}<br></br>
Entity2: {this.state.source[index].Entity2}<br></br>
Operation: {this.state.source[index].Operation}<br></br>
EndPoint: {this.state.source[index].EndPoint}<br></br>
Changes: {this.state.source[index].Changes}<br></br>

知道如何循环这个吗？提前谢谢你

Answer 1

你可以利用map遍历数组，

{
this.state.source && this.state.source.length > 0 && this.state.source.map(source => {
   return <>
    <div>ID: {source.Id}</div>
    <div>AuditDate: {source.AuditDate}</div>
    <div>UserId: {source.UserId}</div>
    <div>Resource: {source.EntitySet}</div>
    <div>Entity1: {source.Entity1}</div>
    <div>Entity2: {source.Entity2}</div>
    <div>Operation: {source.Operation}</div>
    <div>EndPoint: {source.EndPoint}</div>
    <div>Changes: {source.Changes}</div>
   </>
})
}

Answer 2

renderSources() {
        const sources = source.map((eachSource) => {
            return (
                <div>
                    <span>`ID: ${eachSource.Id}`</span>
                    <span>`AuditDate: ${eachSource.AuditDate}`</span>
                    <span>`UserId: ${eachSource.UserId}`</span>
                    <span>`Resource: ${eachSource.EntitySet}`</span>
                    <span>`Entity1: ${eachSource.Entity1}`</span>
                    <span>`Entity2: ${eachSource.Entity2}`</span>
                    <span>`Operation: ${eachSource.Operation}`</span>
                    <span>`EndPoint: ${eachSource.EndPoint}`</span>
                    <span>`Changes: ${eachSource.Changes}`</span>
                </div>
            );
        });
        return sources;
    }

    render() {
        return (<div>{this.renderSources()}</div>);
    }

使用 shorthand 从数组打印数据

Printing data from array using shorthand

arrays

for-loop

reactjs

react-admin