首页
学习
活动
专区
工具
TVP
发布
社区首页 >问答首页 >如何在同构React + React路由器应用程序中处理Post请求

如何在同构React + React路由器应用程序中处理Post请求
EN

Stack Overflow用户
提问于 2015-06-27 01:44:17
回答 1查看 13.7K关注 0票数 20

我想构建同构的react + react-router应用程序,经过几天的googling搜索,现在我可以实现只处理GET请求的同构应用程序。

以下是我到目前为止所做的工作:

超文本标记语言服务器使用超文本标记语言来处理所有request

  • react-router将调用驻留在与路由匹配的每个反应视图中的fetchData函数。

  • 将之前获取的数据设置到反应视图的属性中,并将其呈现到string

  • Inject中,将之前获取的数据作为全局变量window.__STATE__呈现到超文本标记语言中,并将超文本标记语言传递给客户端

< react-router >H117fetchData>我们已经成功地从服务器中呈现了React App <代码>H218<代码>H119当客户端加载完我们的反应应用程序javascript后,它将尝试呈现。但是我们将状态作为React应用程序的道具从window.__STATE__传递,并且React不会重新呈现,因为状态是相同的

问题是它不能处理POST/PUT/DELETE/任何请求。在处理GET请求时,react-router包含有关paramsquery的信息。例如,如果我们有一个路由:/user/:uid,客户端请求这个url:/user/1?foo=bar,那么params将是:{uid: 1}query将是{foo: 'bar'}

然后,react-router可以将它向下传递给fetchData函数,这样它就知道用uid 1来获取用户,并对foo查询执行任何操作。

在POST请求中,react-router不知道POST参数。在服务器端,我们当然可以将POST参数传递给fetchData函数,但是客户端呢?它不知道POST参数是什么。

有没有办法让服务器告诉客户端POST参数?下面是我的登录视图的一个示例。我希望当用户提交表单时,服务器将在错误时呈现错误消息,或在成功时将其重定向到仪表板。

fetchData.js

代码语言:javascript
复制
import whenKeys from 'when/keys';

export default (authToken, routerState) => {
  var promises = routerState.routes.filter((match) => {
    return match.handler.fetchData;
  }).reduce((promises, match) => {
    promises[match.name] = match.handler.fetchData(authToken, routerState.params, routerState.query);
    return promises;
  }, {});

  return whenKeys.all(promises);
}

server.js

代码语言:javascript
复制
...
app.use((req, res) => {
  const router = Router.create({
    routes,
    location: req.originalUrl,
    onError: next,
    onAbort: (abortReason) => {
      next(abortReason);
    }
  });

  router.run((Handler, state) => {
    fetchData(authToken, state).then((data) => {
      // render matched react View and generate the HTML
      // ...
    })
  });
});
...

login.jsx

代码语言:javascript
复制
import React from 'react';
import DocumentTitle from 'react-document-title';
import api from './api';

export default class Login extends React.Component {

  constructor(props) {
    super(props);

    // how to fill this state with POST parameters on error?
    // how to redirect on success?
    // and remember that this file will be called both from server and client
    this.state = {
      error: '',
      username: '',
      password: ''
    };
  }

  // I saw some people use this function, but it'll only work if
  // the form's method is GET
  static willTransitionTo(transition, params, query) {
     // if only we could read POST parameters here
     // we could do something like this
     transition.wait(
       api.post('/doLogin', postParams).then((data) => {
         transition.redirect(`/dashboard`);
       });
     );
  }

  render() {
    return (
      <DocumentTitle title="Login">
        <div className="alert alert-danger">{this.state.error}</div>
        <form method="post">
          <input type="text" name="username" value={this.state.username}  onChange={this._onFieldChange('username')} placeholder="Username" /><br />
          <input type="password" name="password" value={this.state.password}  onChange={this._onFieldChange('password')} placeholder="Password" /><br />
          <button type="submit">Login</button>
        </form>
      </DocumentTitle>
    );
  }

  _onFieldChange(name) {
    var self = this;
    return (e) => {
      e.preventDefault();
      var nextState = {};
      nextState[name] = e.target.value;
      self.setState(nextState);
    }
  }
}
EN

回答 1

Stack Overflow用户

回答已采纳

发布于 2015-06-27 11:56:06

在客户机上获取"POST“数据

在客户端,通过从表单输入中提取值来获取POST数据,其方式与表单正常提交时在服务器上收到的值相对应。

使用POST数据

因此,现在您有了POST数据,但仍然存在一个问题,即无法将POST数据提供给React Router 0.13.x及更早版本中的转换钩子。我创建了一个pull request for this feature,它现在已经关闭,因为它被包含在即将到来的v1.0版本的重写中。

它的要点是,locations现在有一个state对象,用于处理有关当前请求/转换(这两个是相似的)所需的任何额外数据:

在服务器上,您一次只能处理一个请求,所以您使用来自req.body

  • On的数据创建一个静态位置,然后将状态对象(包含提取的表单数据)传递给transitionTo().

的客户端

现在,您的转换钩子能够在两种环境中接收相同的表单数据。如果一切顺利,那就太好了!如果事情进展不顺利,您需要一种传递错误并再次重新呈现表单的方法。新的状态对象再次被解救!使用transition.redirect()并传递输入数据和错误,现在就有了在两端渲染所需的一切。

我现在不会讨论更具体的细节,因为v1.0仍处于测试阶段,v0.13.x无论如何都没有必要的API来实现这一点,但我有一个存储库,它使用上面的pull请求来实现0.13.x的工作流程,您可以在此期间查看:

  • isomorphic-lab -自述文件概述了事物是如何组合在一起的。

下面是该过程的一些粗略流程图:

服务器开机自检出现错误并重新显示

带有错误和重新显示的客户端POST

我还创建了一些与此场景相关的可重用模块:

  • get-form-data以in.
  • react-auto-form提供的<AutoForm>的格式从表单输入中获取数据,您可以使用它来代替<form>来接收来自表单输入的所有数据,作为其onSubmit <form>的参数。React Router的<Link>对于<a>是什么-它处理触发到给定action的转换。传递methodbody (表单数据)状态-这将很快在v1.0中更新。
票数 22
EN
页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接:

https://stackoverflow.com/questions/31079158

复制
相关文章

相似问题

领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档