我有一个反应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日志所示
答案 0 :(得分:0)
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)
答案 1 :(得分:0)
这是我如何让它工作
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)