reactjs - React JS:需要拆分正在检索的状态对象
问题描述
我有一个句柄单击函数,当我们单击行时调用该函数,并且该行的 id 被传递到 handleClick 函数,该函数从那里检索 ID 以将其传递到 API。但是是这种格式 {stdID : "02468"} ,我需要拆分它并传递数字部分 02468 。我使用了 split 函数,但我得到错误 split is not a function 我只需要检索状态对象的值部分并将其传递给 API 以检索记录和链接或前往另一个页面。我检查了各种现有的 Stackoverflow 帖子并尝试复制相同但无济于事。请提供您的意见
import React, { PropTypes , Component } from 'react';
import {
Panel,
Button,
PageHeader,
ControlLabel,
FormControl,
Pagination,
Form,
import StatWidget from '../../src/components/Widget';
var alignment = {
marginLeft: "550px",
marginbottom: "100px"
}
class displayDetails extends Component {
constructor(props) {
super(props);
};
render() {
console.log('Child Component C Summary:',this.props.respData);
console.log('Child Component E Summary:',this.props.EData);
console.log('Child Component A Summary:',this.props.addData);
console.log('Child Component P Summary:',this.props.PData);
if(this.props.addData === undefined){
this.props.addData.FIELD 1="NA";
this.props.addData.FIELD 2="NA";
this.props.addData.FIELD 3="NA";
this.props.addData.FIELD 4="NA";
this.props.addData.FIELD 5="NA";
}
if(this.props.PData === undefined){
this.props.PData.FIELD 1="NA";
this.props.PData.FIELD 2="NA";
this.props.PData.FIELD 3="NA";
}
if(this.props.EData === undefined){
this.props.EData.FIELD 1="NA";
this.props.EData.FIELD 2="NA";
this.props.EData.FIELD 3="NA";
this.props.EData.FIELD 4="NA";
this.props.EData.FIELD 5="NA";
}
return (
<div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-primary"
icon="fa fa-dollar fa-5x"
count={this.props.respData.LIFE_TIME_SPEND}
headerText="Life Time Spend"
footerText="View Details"
linkTo="/blank"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-green"
icon="fa fa-phone fa-5x"
count={this.props.respData.BEST_HOME_PHONE}
headerText="Best Home Phone"
footerText="View Details"
linkTo="/"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-yellow"
icon="fa fa-home fa-5x"
count={this.props.respData.RESIDENCE_COUNTRY}
headerText="Country"
footerText="View Details"
linkTo="/"
/>
</div>
<div className="col-lg-3 col-md-6">
<StatWidget
style="panel-red"
icon="fa fa-shopping-bag fa-5x"
count={this.props.respData.BRAND_CODE}
headerText="Brand"
footerText="View Details"
linkTo="/"
/>
</div>
<div>
<tr>
<td><h1>{this.props.respData.FIELD 1} {this.props.respData.FIELD 2}</h1></td>
</tr>
</div>
<div className="col-lg-15">
<Panel header={<span>Customer Profile Data </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> FIELD 1 </th>
<th> FIELD 2 </th>
<th> FIELD 3 </th>
<th> FIELD 4 </th>
<th> FIELD 5 </th>
<th> FIELD 6 </th>
<th> FIELD 7 </th>
<th> FIELD 8</th>
<th> FIELD 9</th>
<th> FIELD 10</th>
<th> FIELD 11</th>
<th> FIELD 12</th>
<th> FIELD 13</th>
<th> FIELD 14</th>
<th> FIELD 15</th>
<th> FIELD 16</th>
<th> FIELD 17</th>
</tr>
</thead>
<tbody>
<tr>
<td>{this.props.respData.FIELD 1}</td>
<td>{this.props.respData.FIELD 2}</td>
<td>{this.props.respData.FIELD 3}</td>
<td>{this.props.respData.FIELD 4}</td>
<td>{this.props.respData.FIELD 5}</td>
<td>{this.props.respData.FIELD 6}</td>
<td>{this.props.respData.FIELD 7}</td>
<td>{this.props.respData.FIELD 8}</td>
<td>{this.props.respData.FIELD 9}</td>
<td>{this.props.respData.FIELD 10}</td>
<td>{this.props.respData.FIELD 11}</td>
<td>{this.props.respData.FIELD 12}</td>
<td>{this.props.respData.FIELD 13}</td>
<td>{this.props.respData.FIELD 14}</td>
<td>{this.props.respData.FIELD 15}</td>
<td>{this.props.respData.FIELD 16}</td>
<td>{this.props.respData.FIELD 17}</td>
</tr>
</tbody>
</table>
</div>
</Panel>
<div className="col-lg-6">
<Panel header={<span>Phone </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>FIELD 1</th>
<th>FIELD 2 </th>
<th>FIELD 3 </th>
<th>FIELD 4 </th>
<th>FIELD 5 </th>
</tr>
</thead>
<tbody>
{this.props.PData.map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Panel header={<span> Email </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th>FIELD 1 </th>
<th>FIELD 2</th>
<th>FIELD 3</th>
<th>FIELD 4</th>
<th>FIELD 15</th>
</tr>
</thead>
<tbody>
{this.props.EData.map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Panel header={<span>Address </span>} >
<div className="table-responsive">
<table className="table table-striped table-bordered table-hover">
<thead>
<tr>
<th> FIELD 1 </th>
<th> FIELD 2 </th>
<th> FIELD 3 </th>
<th> FIELD 4 </th>
<th> FIELD 5 </th>
<th> FIELD 6 </th>
</tr>
</thead>
<tbody>
{this.props.addData .map((item, i) => {
return (
<tr key={i}>
<td> {item.FIELD 1}</td>
<td> {item.FIELD 2}</td>
<td> {item.FIELD 3}</td>
<td> {item.FIELD 4}</td>
<td> {item.FIELD 5}</td>
<td> {item.FIELD 6}</td>
</tr>
);
})}
</tbody>
</table>
</div>
</Panel>
</div>
<div className="col-lg-6">
<Form>
<FormGroup controlId="formControlsDisabledButton" style={alignment}>
<Button bsStyle="primary" type="submit" disabled>Save</Button>
{' '}
<Button bsStyle="primary" type="reset" disabled>Cancel</Button>
</FormGroup>
</Form>
</div>
</div>
</div>
)
}
}
export default displayDetails;
解决方案
你的意思是这样的?
const stateObj = { stdID: "02468" }
const values = Object.values(stateObj)
// values -> ["02468"]
推荐阅读
- python - 如何仅从 Watson Speech API 获取成绩单?
- ionic-framework - zsh 找不到离子初始化
- javascript - Selenium,如何检查点击后是否发送了正确的请求
- python - 如何将返回键绑定到多个 tkinter 检查按钮
- javascript - req.isAuthenticated 总是返回 false (反应前端)
- python - python中的json数据操作
- vba - Outlook Rest api,如何删除联系人照片
- mysql - MySQL) CONCAT() 函数如何在 REPEAT LOOP 中工作?
- google-apps-script - getRangeByName('namedRange') 仅适用于 ActiveSheet?
- android-studio - 如果孩子有其他情况,则颤抖