空白のオブジェクトへの状態の変化に入力フィールドが応答しない

Question

何かを投稿した後、データの状態をnullに変更した後でも、入力フィールドの値は同じままですか？ 私はconsole.logged状態とポストの後にデータ状態変数が正しく空のオブジェクトに設定されているが、入力の状態は変更されません。 お知らせください。 this.state.data.firstnameがnullまたは未定義であり、入力に設定された値がすでに存在する場合

var AccountView = React.createClass({ 

getDefaultProps: function() { 
    return { 
     data: {}, 
     users: [], 
    }; 
}, 

getInitialState: function() { 
    return { 
     data: {}, 
     users: {}, 
    }; 
}, 

componentDidMount: function() { 
    $.ajax({ 
     url: "/react-webpack/js/source/controllers/get_accounts.php", 
     async: "false", 
     dataType: "json", 
     sucess: function(json) { 
      console.log("success!"); 
      console.log(json);  

     }, 
     error:function(x, e) { 
      alert(e); 
     }, 
     complete: function(a, data) { 
      var users = JSON.parse(a.responseText); 
      this.setState({ 
       users: users, 
      }); 
     }.bind(this) 
    }); 
}, 

handleChange: function(e) { 
    var data = this.state.data; 
    data[e.target.name] = e.target.value; 
    this.setState({ 
     data: data, 
    }); 
}, 

handleSave: function(e) { 
    e.preventDefault(); 
    var users = this.state.users; 
    users.push(this.state.data); 
    $.ajax({ 
     url: "/react-webpack/js/source/controllers/post_accounts.php", 
     type: "post", 
     data: this.state.data, 
     success: function(data, a) { 
      this.setState({ 
       data: {}, 
      }); 
     }.bind(this), 
     error: function(e) { 

     }, 
     complete: function(a, data) { 
      this.setState({ 
       data: {}, 
       users: users, 
      }); 
     }.bind(this) 
    }); 
}, 

render: function() { 
    return (
     <div className="container"> 
      <form method="post">  
       <dl id="form" className="row"> 
        <div className="col-md-4"> 
         <dt>Firstname</dt> 
         <dd> 
          <input name="firstname" type="text" value={this.state.data.firstname} onChange={this.handleChange} /> 
         </dd> 
         <dt>Lastname</dt> 
         <dd> 
          <input name="lastname" type="text" value={this.state.data.lastname} onChange={this.handleChange} /> 
         </dd> 
         <dt>Password</dt> 
         <dd> 
          <input name="password" type="text" value={this.state.data.password} onChange={this.handleChange} /> 
         </dd> 
         <dt>Email Address</dt> 
         <dd> 
          <input name="emailaddress" type="text" value={this.state.data.emailaddress} onChange={this.handleChange} /> 
         </dd> 
         <dt>Submit</dt> 
         <dd> 
          <input type="submit" value="Submit" onClick={this.handleSave} /> 
         </dd> 
        </div> 
        <div className="col-md-8"> 
         <table> 
          <thead> 
           <tr> 
            <th>Firstname</th> 
            <th>Lastname</th> 
            <th>Password</th> 
            <th>Email address</th> 
           </tr> 
          </thead> 
          <tbody> 
          {_.map(this.state.users, function(user) { 
          return (
            <tr> 
             <td>{user.firstname}</td> 
             <td>{user.lastname}</td> 
             <td>{user.password}</td> 
             <td>{user.emailaddress}</td> 
            </tr> 
            ); 
          })} 
          </tbody> 
         </table> 
        </div> 
       </dl> 
      </form> 
     </div> 
    ); 
} 

}); 

module.exports = AccountView; 

Answer 1

これは、私はジェームズギャノングの仕事のオフに基づいて動作するように見つけたものです私の作業環境では、入力をクリアしないヌルオブジェクトが存在しない場合には、状態をクリアに設定することは問題ではありません。

handleSave: function(e) { 
    e.preventDefault(); 
    var users = this.state.users; 
    users.push(this.state.data); 
    $.ajax({ 
    url: "/react-webpack/js/source/controllers/post_accounts.php", 
    type: "post", 
    data: this.state.data, 
    success: function(data, a) { 
     this.setState({ 
      data: {}, 
     }); 
    }.bind(this), 
    error: function(e) { 

    }, 
    complete: function(a, data) { 
     var clear = { 
      firstname: '', 
      lastname: '', 
      password: '', 
      emailaddress: '', 
     }; 
     this.setState({ 
      data: clear, 
      users: users, 
     }); 
    }.bind(this) 
}); 
}, 

Answer 2

あなたが入力にvalue={this.state.data.firstname}を使用し、それを保持します。したがって、dataを空のオブジェクトに設定すると、すべてがnull/undefinedを入力に渡しています。

したがって、状態を更新するときは、dataを空のオブジェクトに設定する代わりに、すべての値を空の文字列にリセットします。あなたのクラスの中

var initialState = { 
    data: { 
     firstname: '', 
     lastname: '', 
     password: '', 
     emailaddress: '' 
    }, 
    users: [] // also not this should be an array instead of an object 
}; 

：

getInitialState: function() { 
    // we're cloning initialState so it doesn't get modified directly 
    // as we want to use it later to reset the state 
    return Object.assign({}, initialState); 
}, 

これを行うには良い方法は、最初の状態の完全な形であなたのクラスの外に新しい初期状態のVARを作成し、あなたの getInitialState方法でそれを使用することです

次に、代わりにthis.setState({ data: {} })を行うのでこれを行う：

this.setState({ 
    data: Object.assign({}, initialState.data) 
}); 

---

OサイドノートをNA、あなたも、あなたが直接、状態を変異している二つの場所がある - handleChangeとhandleSave：setState()の外の様子を変異さ

handleChange: function(e) { 
    var data = this.state.data; 
    data[e.target.name] = e.target.value; // this is directly mutating the state 
    this.setState({ 
     data: data, 
    }); 
}, 

// ... 

handleSave: function(e) { 
    e.preventDefault(); 
    var users = this.state.users; 
    users.push(this.state.data); // this is directly mutating the state 
    // ... 

をいくつかの奇妙な予期せぬ副作用を引き起こすと一般的にパフォーマンスの低下の原因となることができます。 （だけの簡単な変更が必要です）あなたが最初にそれを設定し、それに追加し、状態データをコピーし、それを修正する

：

handleChange: function(e) { 
    var data = Object.assign({}, this.state.data); 
    data[e.target.name] = e.target.value; 
    this.setState({ 
     data: data, 
    }); 
}, 

// ... 

handleSave: function(e) { 
    e.preventDefault(); 
    var users = this.state.users.slice(); 
    users.push(this.state.data); 
    // ...