我有两个简化的React组件，
父组件： - SecondaryLeader
子组件： - SecondaryLeaderDialog
在父组件中我正在加载表和我正在使用的子组件到插入表单。当我惰性表格表没有取数据。当我刷新页面时，它只是提取。
没有刷新我想加载表
数据存储到数据库中但不更新表。
我将非常感谢帮助找出为什么表没有像预期的那样更新，以及如何修复代码。
这是我目前正在使用的代码：
父组件
import React from 'react';
class SecondaryLeader extends React.Component {
constructor(props) {
super(props);
this.state={
fixedHeader: true,
secondaryleader_details:'',
user_type: localStorage.getItem('type'),
api_token: localStorage.getItem('user_token'),
};
}
//This will update the states when component will receive new props
componentWillReceiveProps(props) {
let SecondaryLeader = props.SecondaryLeader;
this.setState({
secondaryleader_details:props.secondaryleader_details == null ? '' :props.secondaryleader_details,
});
}
render() {
const secondaryleader_details_list =this.state.secondaryleader_details;
return (
<table>
<thead>
<tr>
<th>Name</th>
<th>Role</th>
</tr>
<tbody>
secondaryleader_details_list.map((item, index) => (
<tr>
<td>{item.secondaryleader} </td>
<td>{item.role_name} </td>
</tr>
))
</tboady>
</thead>
</table>
);
}
}
子组件
class SecondaryLeaderDialog extends React.Component {
constructor(props) {
super(props);
this.state = {
secondaryleader: '',
role_name: '',
api_token:localStorage.getItem('user_token'),
};
//This binds the context with the functions
this.handleChange = this.handleChange.bind(this);
this.handleSubmit = this.handleSubmit.bind(this);
}
handleSubmit(event) {
event.preventDefault();
const form_information = {
secondaryleader_details: {
secondaryleader: this.state.secondaryleader,
role_name: this.state.role_name,
},
api_token: this.state.api_token,
id: this.props.id,
};
self = this;
{/**
*This will call the add API of the form details
*/
}
APIS.add(form_information, 'conduct-session')
.then(function (response) {
if (response.statusCode == '0') {
self.setState({errors: response.message});
}else{
alert('Your Details Added successfully');
}
});
}
render() {
return(
<div
<form id="submit" onSubmit={this.handleSubmit}>
<label className="formset-label">Name</label>
<input type="text" name="secondaryleader" id="secondaryleader" value={this.state.secondaryleader} onChange={this.handleChange}>
<label className="formset-label">Role</label>
<input type="text" name="role_name" id="role_name" value={this.state.role_name} onChange={this.handleChange}>
<RaisedButton label="Save" primary onTouchTap={this.handleSubmit}/>
</form>
</div>
);
}
}