發送JSON數據從服務器反應不重新呈現頁面

Question

我是一個有點新的ReactJS，

我創建了一個簡單的表格，表格，每個我打提交與表變化的狀態時間新的數據。

我使用龍捲風作爲後端服務器和mongodb作爲我的數據庫。

我正在尋找一種方式來發送相同的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

您提交的表單數據，並立即更新表，而如果你的數據到達服務器檢查。這樣可以更新用戶視圖，但無法更新數據庫。

我強烈建議使用一些基於承諾的HTTP客戶端，如Axios（https://github.com/mzabriskie/axios）。發送一些請求，然後等待承諾解決，然後才更新組件狀態。

你需要的東西是這樣的：

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); 
    }) 
} 

/*...*/