0

我有这两个简化的 React 组件，
父组件：-SecondaryLeader
子组件：-SecondaryLeaderDialog
在父组件中，我正在加载表格，在子组件中，我正在使用插入表单。当我惰性化表单表时没有获取数据。当我刷新页面时，它只是在获取。

不刷新我想加载表

数据存储到数据库中但不更新表。
我将不胜感激帮助弄清楚为什么 table 没有按预期更新，以及如何修复代码以使其更新。
这是我目前正在使用的代码：

父组件 

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>
             );
             }
             }
4

0 回答 0