componentDidUpdate() 未被调用

componenetDidUpdate() is not being called

我正在尝试删除 <Table> 数据。我正在做的是,选择 <Table> 的单行并按下 Delete 按钮(定制)。并且正在触发删除功能。

正在服务器端删除数据,但 UI 未更新。 这是代码:

export default class DeleteUserForms extends Component{

constructor(props) {
    super(props);
    this.state = {value: 1};
    this.data = this.props.selectedValue;
    this.handleDeletedata=this.handleDeletedata.bind(this);
}

handleDeletedata(event){
    event.preventDefault();
    console.log('Data before delete function call');
    console.log(this.data);
    this.props.dispatch(deleteUser(this.data));
    // this.props.close(event)
}

componentWillUpdate(){
    console.log('COMPONENT WILL UPDATEEEEEEEEEEEEEEEEE');
    this.props.dispatch(getUserRole())
}

// componentDidMount(){
//     console.log('COMPONENT DID MOUNT');
//     // this.props.close();
// }

componentDidUpdate(){
    console.log('COMPONENT DID UPDATEEEEEEEEEEEEEEEEEEEEE');
    // this.props.close();
}


render(){
    return(
        <form onSubmit={this.handleDeletedata}>
            <MuiThemeProvider muiTheme={muiThemedrpdown}>
                <div>
                    Do you really want to delete the record for {this.props.selectedValue.name}?
                </div>
            </MuiThemeProvider>
            <MuiThemeProvider muiTheme={muiThemebtn}>
                <div>
                  <RaisedButton label="Yes" primary={true} type="submit" className="btndiv"  
                    />  
                  <RaisedButton label="No" primary={true} 
                    onClick={this.props.close}  className="btndiv"  />  
                </div>
            </MuiThemeProvider>
        </form> 
      );

} }

这里我也试图在数据被删除后关闭一个模式。但是 componentDidUpdate() 方法没有被调用。 请推荐

它不会刷新,因为您在构造函数中分配 date - date 始终具有初始值。构造函数在开始时只被调用一次,所以this.data总是有一个初始值this.props.data。组件没有刷新,因为什么都没有真正改变。

试试这个:

this.props.dispatch(deleteUser(this.props.data));

尝试在 componentWillReceiveProps 内分配 this.data,正如其他人提到的那样 - 构造函数在组件的生命周期中仅被调用一次。