1
私はreact-reduxを反応ブートストラップテーブルと併用しています。私のUIは画像で与えられます。私が支払いを追加すると、データはデータベースに保存されます。私はcomponentdidupdateとcomponentdidUpdateを使って小道具データをレンダリングしました。何も働いていません。テーブルはリフレッシュせずにデータをレンダリングしません。助けてください................................................ .................................................. ....反応するブートストラップテーブルがリフレッシュなしでデータをレンダリングしない
import React from 'react';
import { connect } from 'react-redux';
// import {bindActionCreators} from 'redux'
import { Link } from 'react-router';
import Messages from '../Messages';
import classnames from 'classnames';
import { BootstrapTable, TableHeaderColumn } from 'react-bootstrap-table';
import { getCrmOneCustomer, saveStatus, getCrmStatus } from '../../actions/crmAction';
//--------------------------------------------------------------------------
class CrmStatus extends React.Component {
constructor(props) {
super(props);
this.state = {
name: '', shop_name: '', crm_id: '', status: ''
};
this.props.dispatch(getCrmOneCustomer(this.props.params.id));
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
componentDidMount() {
this.props.dispatch(getCrmStatus(this.props.params.id));
}
//--------------------------------------------------------------------------
componentWillReceiveProps(newProps) {
console.log('componentWillReceiveProps............ from edit');
console.log(newProps)
this.setState({
name: newProps.CrmOne.name,
shop_name: newProps.CrmOne.shop_name,
status: newProps.CrmOne.status,
})
}
//--------------------------------------------------------------------------
handleChange(event) {
this.setState({
[event.target.name]: event.target.value
});
}
//--------------------------------------------------------------------------
handleSubmit(event) {
event.preventDefault();
var Id = this.props.params.id;
var obj = {};
obj["crm_id"] = Id
obj["name"] = this.state.name
obj["shop_name"] = this.state.shop_name
obj["status"] = this.state.status
console.log(obj)
this.props.dispatch(saveStatus(obj))
}
//--------------------------------------------------------------------------
componentDidUpdate(){
this.products = this.props.CrmOneStatus
}
render() {
return (
<div className="container ca-container">
<div className="row">
<div className="col-md-12">
<h2>CRM Status</h2>
</div>
</div>
<div className="row">
<div className="col-md-12">
<div className ="col-md-8">
<BootstrapTable data={this.products} striped hover pagination={true} search>
<TableHeaderColumn isKey dataField='name'>Name</TableHeaderColumn>
<TableHeaderColumn dataField='status'>status</TableHeaderColumn>
<TableHeaderColumn dataField='createdAt'>Date</TableHeaderColumn>
</BootstrapTable>
</div>
<div className ="col-md-4">
<h4> Add Payment </h4>
<form onSubmit={this.handleSubmit} encType="multipart/form-data">
<div className="form-group">
<label>
Name:
</label>
<input disabled type="text" className="form-control" name="name" value={this.state.name} onChange={this.handleChange} placeholder="Zahid Hasan" />
</div>
<div className="form-group">
<label>
shop name:
</label>
<input type="text" className="form-control" name="shop_name" value={this.state.shop_name} onChange={this.handleChange} placeholder="amount" />
</div>
<div className="form-group">
<label>
Status:
</label>
<textarea rows="8" cols="50" type="text" className="form-control" name="status" value={this.state.status} onChange={this.handleChange} placeholder="comment" />
</div>
<div className="btn-group" role="group">
<button type="submit" className="btn btn-success btn-lg">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
);
}
}
// ======================== REDUX CONNECTORS ========================
const mapStateToProps = (state) => {
return {
CrmOne: state.crmCustomer.CrmOne,
CrmOneStatus: state.crmCustomer.CrmOneStatus
};
};
export default connect(mapStateToProps)(CrmStatus);
クラス変数にpropsを代入してデータとして渡す必要はありません。クラス変数aにプロップを代入すると、簡単に '
{this.props.CrmOneStatus}がそれを試みたが動作しない –
それは動作しないとは何か、エラーがあるか –