映射对象数组以在 ReactJS 中创建表 [英] Map over an array of objects to create a table in ReactJS

问题描述

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

<预><代码>[{"_id": "596fd78716053511f42188e9","Access_Token": "ogdb33RJ0el2AZ1z1vNCvRy7hF96oIMLh_xLI6rMPmykXbfdimW_aBpC6dZOAnodQels8AeEXcANJIQMxeANng2",Refresh_Token": G63-武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}]

代码

 从 'react' 导入 React从'react-redux'导入{连接}import * as chrrdActions from '../../Redux/Chrrd'const APIs = props =>(props.ChrList.list.map((item, i) => {return <td>{item._id}</td><td>{item.Character_Name}</td><td className="省略号">{item.Character_ID}</td><td className="省略号">{item.Access_Token}</td><td className="省略号">{item.Refresh_Token}</td></tr>}));const ChrTable = props =>(<div><table style={{ 'height': '40%', 'width': '600px', 'display': 'block' }}><tr><th>id </th><th>角色名称</th><th>字符 ID </th><th>访问令牌</th><th>刷新令牌</tr>{蜜蜂}</tbody>

)导出默认连接(状态=>({ChrList: state.ChrList}),{...chrdActions})(ChrTable)

这是页面显示的内容

我不确定发生了什么，但我使用 redux 将 json 存储到要使用的状态，如果需要，可以发布 redux 的代码.调用工作正常，传递 json 工作如图片中的 redux 日志所示

解决方案

这是我如何让它工作

从 'react' 导入 React从'react-router-redux'导入{推送}从'react-redux'导入{连接}import * as chrrdActions from '../../Redux/Chrrd'import * as ViewChrActions from '../../Redux/ViewChr'类 Chr 扩展了 React.Component {componentWillMount() {this.props.callingApi();this.props.updatePf('失败');this.props.updateSkL('失败');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();};使成为() {如果(this.props.ChrList.Loading === '假'){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="省略号">{item.Character_ID}</td><td className="省略号">{item.Access_Token}</td><td className="省略号">{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>});返回 <div ><tr><th>id </th><th>角色名称</th><th>字符 ID </th><th>访问令牌</th><th>刷新令牌<th>动作</tr>{蜜蜂}</tbody>

} 别的 {返回 <div ><h1>正在加载...</h1>

}}}导出默认连接(状态=>({ChrList: state.ChrList,ViewChr: state.ViewChr}),{...chrdActions，...ViewChrActions，更改页面:() =>推('/vchr')})(铬)

i have a react js app the use api severs to get a json their are no errors here is the

[
  {
    "_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
  }
]

code

  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)

here is what the page shows

im not sure what is happen but i use redux to store the json to a state to be used can post the code for redux if need. the call works fine and passing the json works as show in the redux logs in the picture

解决方案

here is how i got it to work

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)

这篇关于映射对象数组以在 ReactJS 中创建表的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！