所以我正在使用react-redux。我试图打开一个模式取决于动作的结果集，这是一个api调用。我可以在渲染中使用this.props访问操作结果，但是如果我使用条件化身并更新状态，它将进入一个inifnite循环。所以我想知道如何从组件内部访问动作的结果集并更新模态等。
import _ from 'lodash';
import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchServices, checkServiceEditable } from '../../actions';
import { Link } from 'react-router-dom';
import { bindActionCreators } from 'redux';
import { Button, ButtonToolbar, Modal } from 'react-bootstrap';
import FontAwesome from 'react-fontawesome';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import 'react-bootstrap-table/dist/react-bootstrap-table-all.min.css';
import $ from 'jquery';
const sourceType = {
0: 'CCP',
1: 'Remedy'
};
function enumFormatter(cell, row, enumObject) {
//console.log(cell);
//console.log(row);
//console.log(enumObject);
//console.log(enumObject[cell]);
return enumObject[cell];
}
class Services extends Component {
constructor (props) {
super(props)
this.meta = {title:'Services',description:'List Services'}
this.passMetaBack = this.passMetaBack.bind(this);
this.options = {
defaultSortName: 'name', // default sort column name
defaultSortOrder: 'asc' // default sort order
};
this.editServices = this.editServices.bind(this);
this.handleShow = this.handleShow.bind(this);
this.handleClose = this.handleClose.bind(this);
this.state = {
show: false
};
}
handleClose() {
this.setState({ show: false });
}
handleShow() {
this.setState({ show: true });
}
passMetaBack = () => {
this.props.passMetaBack(this.meta);
}
componentDidMount() {
console.log(this);
this.props.fetchServices();
this.passMetaBack()
}
editServices (id) {
this.props.checkServiceEditable(id){
return function(dispatch){
console.log(dispatch)
}
}
}
actionButtons(cell, row, enumObject, rowIndex) {
return (
<ButtonToolbar>
<Button bsClass="btn btn-sm btn-default btn_service_view show-popover" href={"/api/user/services/owners/id/"+row.id+"/format/xml"} data-toggle="popover" data-placement="top" data-content="View Service users" data-original-title="" title=""><FontAwesome name='eye' /></Button>
<Button bsClass="btn btn-sm btn-default btn_service_dashboard show-popover" href={"/api/user/service/dashboard/id/"+row.id+"/format/xml"} data-toggle="popover" data-placement="top" data-content="View Service" data-id={row.id} data-original-title="" title=""><FontAwesome name='address-card-o' /></Button>
<Button bsClass="btn btn-sm btn-info btn_edit_services show-popover" onClick={() =>this.editServices(row.id)} data-toggle="popover" data-placement="top" data-content="Edit Service" data-id={row.id} data-original-title="" title=""><FontAwesome name='pencil' /></Button>
<Button bsClass="btn btn-sm btn-default btn_service_comms_matrix show-popover" href="#" data-toggle="popover" data-placement="top" data-content="View consolidated matrices" data-id={row.id} data-original-title="" title=""><FontAwesome name='handshake-o' /></Button>
<Button bsClass="btn btn-sm btn-danger btn_remove_services show-popover" href="/api/admin/remove/service/id/{row.id}/format/json" data-toggle="popover" data-placement="top" data-content="Delete Service" data-original-title="" title=""><FontAwesome name='trash' /></Button>
</ButtonToolbar>
)
}
renderTable(services){
return <BootstrapTable keyField='id' data={ services } options={ this.options } pagination striped hover insertRow search tableHeaderClass='table-vf thead'>
<TableHeaderColumn dataField='name' dataSort={true} >Service / Project / Programme</TableHeaderColumn>
<TableHeaderColumn dataField='ref' >Ref</TableHeaderColumn>
<TableHeaderColumn dataField='source'
filter={ { type: 'TextFilter', defaultValue: 'CCP' } }>Source</TableHeaderColumn>
<TableHeaderColumn dataField='owner' >Owner</TableHeaderColumn>
<TableHeaderColumn dataFormat={this.actionButtons.bind(this)}>Action</TableHeaderColumn>
</BootstrapTable>
}
render() {
let table = ''
console.log(this.props);
if(Object.keys(this.props.services).length > 0){
table = this.renderTable(this.props.services)
}
if(Object.keys(this.props.servicesEditCheck).length > 0){
if(this.props.servicesEditCheck.header.error){
$('#myModalError .modal-body').html(this.props.servicesEditCheck.header.message);
//$('#myModalError').modal('show');
}else{
let data = this.props.servicesEditCheck.body.recordset.record[0];
console.log(data);
//for(let key in data){
//$("#"+key.toLowerCase()).val(data[key]);
//}
//$("#mdl_edit_services").modal('show');
this.handleShow()
}
}
return (
<div className="container-fluid">
<div className="row-fluid">
<a className="btn btn-success hidden-print" href="/add_service.php"><i class="fa fa-plus" aria-hidden="true"></i> Add New Service</a>
</div>
<div className="row-fluid top-buffer">
{table}
</div>
<form name="frm_edit_services" id="frm_edit_services" method="post" className="form-horizontal">
<Modal id="mdl_edit_services" className="modal fade" role="dialog">
<Modal.Header closeButton>
<Modal.Title>Update Service/Group</Modal.Title>
</Modal.Header>
<Modal.Body>
<input type="hidden" id="id" name="id" value="" />
<input type="hidden" id="current_ref" name="current_ref" value="" />
<input type="hidden" id="current_name" name="current_name" value="" />
<input type="hidden" id="mode" name="mode" value="update" />
<div className="form-group">
<label className="control-label col-sm-4" for="ref">Service reference (optional):</label>
<div className="col-sm-6">
<input type="text" name="ref" id="ref" maxlength="15" value="" className="form-control" />
</div>
</div>
<div className="form-group">
<label className="control-label col-sm-4" for="name">Service name:</label>
<div className="col-sm-6">
<input type="text" name="name" id="name" maxlength="48" value="" className="form-control" />
</div>
</div>
</Modal.Body>
<Modal.Footer>
<Button bsType="submit" className="btn btn-success hidden-print"><FontAwesome name='floppy-o' /></Button>
<span className="help-block">(Click once, changes can take a few seconds to complete)</span>
</Modal.Footer>
</Modal>
</form>
</div>
);
}
}
function mapStateToProps(state) {
console.log(state);
return { services: state.services, servicesEditCheck: state.servicesEditCheck };
}
//Anything returned from this function will end up as props
//on the User container
function mapDispatchToProps(dispatch){
// Whenever getUser is called, the result should be passed
// to all our reducers
//return {
//actions: bindActionCreators(Object.assign({}, fetchServices, checkServiceEditable ), dispatch)
//};
return bindActionCreators({ fetchServices, checkServiceEditable }, dispatch);
}
export default connect(mapStateToProps, mapDispatchToProps)(Services);
这里发生无限循环
if(Object.keys(this.props.servicesEditCheck).length > 0){
if(this.props.servicesEditCheck.header.error){
$('#myModalError .modal-body').html(this.props.servicesEditCheck.header.message);
//$('#myModalError').modal('show');
}else{
let data = this.props.servicesEditCheck.body.recordset.record[0];
console.log(data);
//for(let key in data){
//$("#"+key.toLowerCase()).val(data[key]);
//}
//$("#mdl_edit_services").modal('show');
this.handleShow()
}
}
每当它点击this.handleShow()时，它就会更新状态并点击render然后再次点击同一行。
答案 0 :(得分：0)
您可以检查this.state.show == true功能中的handleShow是否正常，仅在this.setState({ show: true })尚未设置为show时致电true。
这样，您就可以防止state被不必要地更新，并且不会不必要地调用render函数。