Question

我正在尝试删除<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()方法。请建议

Answer 1

它不会刷新，因为您在构造函数中指定了date - date始终具有初始值。构造函数在开头只调用一次，因此this.data将始终具有初始值this.props.data。组件没有刷新，因为什么都没有真正改变。

试试这个：

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

Answer 2

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

componentsnetDidUpdate（）未被调用

2 个答案: