从 React 发送 JSON 数据到服务器而不重新渲染页面

Question

我对 ReactJS 有点陌生，

我创建了一个简单的表单和 table，每次我点击提交 table 的状态都会随着新数据的变化而变化。

我使用 tornado 作为后端服务器，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

您正在提交表单数据并立即更新 table，而不检查您的数据是否到达服务器。这样就可以在更新数据库失败时更新用户视图。

我强烈建议使用一些基于 promise 的 HTTP 客户端，例如 Axios (https://github.com/mzabriskie/axios)。发送一些请求，然后等待 promise 解决，然后才更新您的组件状态。

你需要这样的东西：

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

/*...*/

从 React 发送 JSON 数据到服务器而不重新渲染页面

Send JSON data to server from react without rerender the page

tornado

mongodb

reactjs