が再レンダリングすることなく、私は簡単なフォームとテーブルを作成しました、</p> <p>ReactJSに少し新しいですページ

Question

を反応させるから、サーバーにJSONデータを送信し、私が打つたびに持つテーブルの変化の様子を提出します新しいデータ

私はトルネードをバックエンドサーバーとして使用しており、mongodbは自分のDBとして使用しています。

私は（再びページを再レンダリングせず。）は、第2のパイプ上のサーバに同じJSONを送信する方法を探しています

私はそれをどのように行うことができますか？

----編集 - コンポーネントを反応させる-----

import Re 

act from 'react'; 

export default class Reblaze_Dashboard extends React.Component { 
    constructor(props) { 
     super(props); 

     this.onNewUser = this.onNewUser.bind(this); 

     this.state = { 
      data: window.obj, 
     }; 
    } 

    onNewUser(e) { 
     e.preventDefault(); 

     const formData = {}; 
     for (const field in this.refs) { 
      formData[field] = this.refs[field].value; 
     } 

     this.state.data.push(formData); 
     this.setState({ 
      data: this.state.data, 
     }); 
    } 

    render() { 
     return(
       <div> 
        <h2>Dashboard page</h2> 

        <form onSubmit={this.onNewUser}> 
         <div className="form-group"> 
          <label htmlFor="first-name-input">First name:</label> 
          <input type="text" className="form-control" ref="firstname" id="first-name-input" /> 
         </div> 
         <div className="form-group"> 
          <label htmlFor="last-name-input">Last name:</label> 
          <input type="text" className="form-control" ref="lastname" id="last-name-input" /> 
         </div> 
         <input type="submit" value="Submit" className="btn btn-primary pull-right" /> 
        </form> 

        <br /><br /> 

        <div className="table-responsive"> 
         <table className="table table-striped table-hover"> 
          <thead> 
           <tr> 
            <td><h4>First name</h4></td> 
            <td><h4>Last name</h4></td> 
           </tr> 
          </thead> 
          <tbody> 
           {this.state.data.map((line, key) => 
            <tr key={key}> 
             <td>{line.firstname}</td> 
             <td>{line.lastname}</td> 
            </tr> 
           )} 
          </tbody> 

         </table> 
        </div> 
       </div> 
      ) 
    } 
    } 

Answer 1

あなたはフォームデータを提出し、すぐにデータがサーバーに到達したかどうかをチェックせずにテーブルを更新しています。これにより、データベースの更新に失敗したときにユーザービューを更新することができます。

Axios（https://github.com/mzabriskie/axios）のようないくつかの約束ベースのHTTPクライアントを使用することを強くお勧めします。いくつかのリクエストを送信して、約束の解決を待ってから、コンポーネントの状態を更新した後でなければなりません。あなたはこのような何か必要

：

import React from 'react'; 
import axios from 'axios'; 

/*...*/ 

onNewUser(e) { 
    e.preventDefault(); 
    const formData = {}; 
    for (const field in this.refs) { 
    formData[field] = this.refs[field].value; 
    } 

    axios.post('yourApiUrl', formData) 
    // if request is sent and status is ok, update form and send second request 
    .then((res) => { 
    this.state.data.push(formData); 
    this.setState({ 
     data: this.state.data, 
    }); 
    return axios.post('yourApiUrl', formData); 
    }) 
    // if second request is ok, receive a notification 
    .then((res) => { 
    console.log('second request is ok'); 
    }) 
    // if there is an error, receive a notification 
    .catch((err) => { 
    console.log(err); 
    }) 
} 

/*...*/