映射对象数组以在 ReactJS 中创建表

Question

我有一个 React js 应用程序，使用 api 服务器获取 json 它们没有错误，这是

[
  {
    "_id": "596fd78716053511f42188e9",
    "Access_Token": "ogdb33RJ0el2AZ1z1vNCvRy7hF96oIMLh_xLI6rMPmykXbfdimW_aBpC6dZOAnodQels8AeEXcANJIQMxeANng2",
    "Refresh_Token": "G63-wu-RpG0xyQTePCt5XuzbGC6fF8Wbfsr1z_VoiT1fplso4qugOCO_ghHiNCUXJJfajc2iPZaPCEIPVb6rbRtxXxLxpGi7Xud3UqLph2eO9tGeO9538Rz-2vg7DiqqcQ8e8O8TvW8suLxLBHNO8QHCwHxGNFfVNZ4CfEo2fV-6MxmrNeh1S01g1TT0IKAKZQ1XLop6X0zKAbScia4rdIwBDHoRtyZzqzPN5uwmhg8MUcBsQ0cwQOMb3s3eMuWKWP1dm76Otyt5ZWAgLGp4JMOjmSB0w6Rcy48ckA2qIxTsosHYUg7Y5ndT9JyuQRpunsxA2",
    "Character_ID": "92935856",
    "Character_Name": "MI Alar",
    "__v": 0
  },
  {
    "_id": "596fd79016053511f42188ea",
    "Access_Token": "b1pWTaL12_dK6-wR3jTdthli4noDKGLfO3iTcQ1e40J8JCEQYQ6Bn9VV7lIoJShvUJ1ojKRpXgmq1pOQyGBlxQ2",
    "Refresh_Token": "cvleJ32OTTOremynstuSouDb_Vvym__O2iiJHWdTY-D2Pir1lGfGKQFyvyoDTIbf7JL0nVmuzkDdanzeJad4khNZu0SjsfGms-q3FwA8myBoYZ6UJTjPqu2GtBfnPDLN0rVbbjOkK4SooXlBSEqn6YU_zAUsVo5SYa1TA5lAQLQkJY2B_gfs2I5l9lbvNGcf4K3X6IWO4GFMQDk5nfV--m7G-3EoRWdaLCvf5eUy_TAF2V-oq3c2CvVp_SBTFaXPDM8NPGpt7mjFxvwkHCYlVGCm8XeUHKIZfiLazZEJ9mRW4g2pfhZbRAXEpTLpWVY8N7CG0vd8J7w2",
    "Character_ID": "390786416",
    "Character_Name": "shawn313",
    "__v": 0
  },
  {
    "_id": "596fd79916053511f42188eb",
    "Access_Token": "SwjGVPd5AKMtZGVA1ei8VEG3GZ1XJZx6ErGrQO3fr0S2zKHJL_j4490kRQ0l_cBOgaN5FrQY2QAtTR2OUYGlfg2",
    "Refresh_Token": "aPvIXyA8Xx--UJixHJ1T3KGkhN6gfA1OdBorjOj_JGiHz3eFupv3DhchmbHpDGN_5GIFKspHr5xQZhLjxuiBo0RPmdRlLFpblGwv5X7i_6gpXoMV4_scLQ_X7CE8HSAtXuSMxyJy7GotxTgtHvBhFCDHrI9Py1G1g5BMZ6aGFXYA2CR9uXWIp-y5E-djAk7L4235Ows4t6Ow0kcHxWx7EX6OQkrwfZpqUOjDMfdS5DM-du2bzoQ2",
    "Character_ID": "812900457",
    "Character_Name": "shawn312",
    "__v": 0
  }
]

代码

  import React from 'react'
  import { connect } from 'react-redux'
  import * as chrrdActions from '../../Redux/Chrrd'

  const Apis = props => (props.ChrList.list.map((item, i) => {
     return <tr key={item.objecj._id}>
    <td>{item._id}</td>
    <td>{item.Character_Name}</td>
    <td className="ellipsis">{item.Character_ID}</td>
    <td className="ellipsis">{item.Access_Token}</td>
    <td className="ellipsis">{item.Refresh_Token}</td>
</tr>
 }));

const ChrTable = props => (
<div>
    <table style={{ 'height': '40%', 'width': '600px', 'display': 'block' }}>
        <tbody>
            <tr>
                <th> Id </th>
                <th> Character Name </th>
                <th> Character ID</th>
                <th> Access Token </th>
                <th> Refresh Token</th>
            </tr>
            {Apis}
        </tbody>
    </table>
</div>
 )

   export default connect(state => ({
ChrList: state.ChrList
   }),
{
    ...chrrdActions
}
  )(ChrTable)

这是页面显示的内容

我不确定发生了什么，但我使用 redux 将

json

存储到要使用的状态，可以根据需要发布 redux 的代码。调用工作正常，并且传递

json

的工作如图中的 redux 日志所示。

Answer 1

Apis

是一个

functional stateless component

，您需要

pass the props

并像

component

那样称呼它。它还必须返回单个元素，因此将地图的内容包装在

tbody

标签内，它应该可以工作

 import React from 'react'
  import { connect } from 'react-redux'
  import * as chrrdActions from '../../Redux/Chrrd'

  const Apis = props => <tbody>{props.ChrList.list.map((item, i) => {
     return <tr key={item.objecj._id}>
    <td>{item._id}</td>
    <td>{item.Character_Name}</td>
    <td className="ellipsis">{item.Character_ID}</td>
    <td className="ellipsis">{item.Access_Token}</td>
    <td className="ellipsis">{item.Refresh_Token}</td>
</tr>
 })}</tbody>;

const ChrTable = props => (
<div>
    <table style={{ 'height': '40%', 'width': '600px', 'display': 'block' }}>
        <tbody>
            <tr>
                <th> Id </th>
                <th> Character Name </th>
                <th> Character ID</th>
                <th> Access Token </th>
                <th> Refresh Token</th>
            </tr>
            <Apis {...props}/>
        </tbody>
    </table>
</div>
 )

   export default connect(state => ({
ChrList: state.ChrList
   }),
{
    ...chrrdActions
}
  )(ChrTable)

Answer 2

这就是我如何让它工作的

import React from 'react'
import { push } from 'react-router-redux'
import { connect } from 'react-redux'
import * as chrrdActions from '../../Redux/Chrrd'
import * as ViewChrActions from '../../Redux/ViewChr'

class Chr extends React.Component {
componentWillMount() {
    this.props.callingApi();
    this.props.updatePf('failed');
    this.props.updateSkL('failed');
    this.props.updateId('');
    this.props.updateCid('');
    this.props.updateAt('');
    this.props.updateRt('');
    this.props.updateSk('');
}

Charview(a1, a2, a3, a4) {
    this.props.updateId(a1);
    this.props.updateCid(a2);
    this.props.updateAt(a3);
    this.props.updateRt(a4);
    this.props.callingApiPre();
    this.props.changePage();
};

render() {
    if (this.props.ChrList.Loading === 'false') {
        const apis = this.props.ChrList.list.map((item, i) => {
            return <tr key={item._id}><td className="ellipsis">{item._id}      </td>
                <td>{item.Character_Name}</td>
                <td className="ellipsis">{item.Character_ID}</td>
                <td className="ellipsis">{item.Access_Token}</td>
                <td className="ellipsis">{item.Refresh_Token}</td>
                <td>
                    <button onClick={() => this.Charview(item._id,    item.Character_ID, item.Access_Token, item.Refresh_Token)} className="button_t"  >View</button>
                </td>
            </tr>

        });

        return <div  >
            <table className='table'>
                <tbody>
                    <tr>
                        <th> Id </th>
                        <th> Character Name </th>
                        <th> Character ID</th>
                        <th> Access Token </th>
                        <th> Refresh Token</th>
                        <th> Actions</th>
                    </tr>
                    {apis}
                </tbody>
            </table>
        </div>
    } else {
        return <div  >
            <h1>Loading...</h1>
        </div>
    }
}
}

 export default connect(state => ({
ChrList: state.ChrList,
ViewChr: state.ViewChr
}),
{
    ...chrrdActions,
    ...ViewChrActions,
    changePage: () => push('/vchr')
}
)(Chr)