Map over an array of objects to create a table in

问题:

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

回答1:

Apis is a functional stateless component, you need to pass the props to it and call it like a component. Also it must return a single element so wrap the content of your map within a tbody tag and it should work

 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)

回答2:

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)