地圖上對象的數組在ReactJS

Question

創建一個表，我有一個反應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) 

這裏是頁面顯示

林不知道是什麼發生，但我使用終極版的JSON存儲使用可以張貼終極版，如果需要的代碼的狀態。該通話工作正常，並通過json的工作，如圖所示在REDX日誌

Answer 1

這是我如何得到它的工作

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) 

Answer 2

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)