Question

我在React很新。我有包含表的主要组件和子组件。在componentDidmount上，我向API发送请求并接收我在表中呈现的数据。这是我第一次更新子组件。然后我可以在表格中添加和删除行，在此事件之一后，我的应用程序会显示通知（通过componentDidUpdate）。在收到不是我想要的初始数据后会出现不幸的通知。

var App = React.createClass({
getInitialState: function(){
    return {
        users:[],
        display: "none",
        currentId : 3,
    }
},
componentDidMount: function() {
    var that = this;
    this.serverRequest = 
      axios
        .get(API_URL + "/users")
        .then(function(result) {  
            that.setState({
            users: result.data
          });
        });
},
render: function(){
    return (
        <div className="container-fluid">
            <NotificationSystem ref="notificationSystem" />
            <div>
                <button className="btn btn-info" onClick={this.handleClick}>Add user</button>
            </div>  
            {this.manageForm()}
            <UsersTable data={this.state.users} onDeleteUser={this.deleteUser} addNotification={this._addNotification} />

        </div>
    );
}
});

var UsersTable = React.createClass({
renderRows: function() {
    var that = this;
    var rows;
    if(this.props.data.length !== 0){
        rows = this.props.data.map(function(row){
        return <UsersRow key={row.id} data={row} onDeleteUser={that.props.onDeleteUser} />
        })
    } else {
        rows = <UsersPlaceholder />;
    }
    return rows;
},
shouldComponentUpdate: function(nextProps, nextState) {
    return nextProps.data !== this.props.data;
},

componentDidUpdate: function (prevProps, prevState) {
    this.props.data.length > prevProps.data.length ? this.props.addNotification('User was added','success') : this.props.addNotification('User was deleted','error');
},

render: function(){

    return (
            <table className="table">   
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                        <th>e-mail</th>
                        <th>del</th>
                    </tr>
                </thead>
                <tbody> 
                    {this.renderRows()}
                </tbody>    
            </table>
    ); 
}

});

是否有任何可能性＆＃34; catch＆＃34;首先更新表组件以停止显示通知？

Answer 1

如果我理解正确（您不希望初始人口添加通知），您可以在componentDidUpdate: function (prevProps, prevState) { this.props.data.length > prevProps.data.length && prevProps.data.length > 0 ? this.props.addNotification('User was added','success') : this.props.addNotification('User was deleted','error'); }方法中检查以前的道具是否为空：

layoutSubviews

这不会处理删除所有用户然后添加另一个用户的情况。为此，您可以在ajax成功时设置状态属性，将其传递给子组件，并在子级更新时以父状态更新它。

Answer 2

使用它就像下面的代码一样，它对我有用

var App = React.createClass({
getInitialState: function(){
    return {
        users:[],
        display: "none",
        currentId : 3,
        callonUpdate : true,
    }
},
deleteUser:function( id ){
        var data = [{id:2,name:"Ahmad ali"}];
        this.setState({
            users: data
          });
},
toggleUpdate:function() {
            console.log("update");
        this.setState({
            callonUpdate: true,
          });
},

componentDidMount: function() {
        var data = [{id:1,name:"shahid ahmad"},{id:2,name:"Ahmad ali"}];
    this.setState({
            users: data,
            callonUpdate : false
          });
},
render: function(){
    return (
        <div className="container-fluid">
            <UsersTable data={this.state.users} checkonCall = {this.state.callonUpdate} togglecallonUpdate = {this.toggleUpdate} onDeleteUser={this.deleteUser} />

        </div>
    );
  }
 });



var UsersTable = React.createClass({
delete : function( id ) {
        this.props.onDeleteUser(id);
},
renderRows: function() {
    var that = this;
    var rows;
    if(this.props.data.length !== 0){
        rows = this.props.data.map(function(row){
        return <tr>
                    <td>{row.id}</td>
                    <td> {row.name} </td>
              <td onClick={this.delete.bind(this,row.id)}>Delete </td>
              </tr>
        },this)
    } 
    return rows;
},

shouldComponentUpdate: function(nextProps, nextState) {
    return nextProps.data !== this.props.data;
},

componentDidUpdate: function (prevProps, prevState) {
    console.log(this.props.checkonCall);
    if(this.props.checkonCall) {
    this.props.data.length > prevProps.data.length ? console.log('User was added') : console.log('User was deleted');
    }

    this.props.togglecallonUpdate();

},

render: function(){

    return (
            <table className="table">   
                <thead>
                    <tr>
                        <th>id</th>
                        <th>name</th>
                    </tr>
                </thead>
                <tbody> 
                    {this.renderRows()}
                </tbody>    
            </table>
    ); 
}

});
ReactDOM.render(
 <App  />,
 document.getElementById('container')
);

Answer 3

实际上你误解了这个概念根据React Js官方文档。

componentDidMount（）在初始渲染发生后立即仅在客户端（不在服务器上）调用一次。在生命周期的这一点上，您可以访问您孩子的任何引用（例如，访问底层DOM表示）。子组件的componentDidMount（）方法在父组件之前调用。您将在componentDidMount中加载初始数据，该数据在渲染组件后实际调用以加载您应该使用的初始数据componentWillMount（）

componentWillMount将在初始渲染发生之前立即生效。如果在此方法中调用setState，则render（）将看到更新的状态，并且只会在状态更改时执行一次。

使用componentWillMount更改componentDidMount以加载您的初始数据，它将解决您的问题

首次更新组件

3 个答案: