Javascript 组件装载以在ReactJs中呈现视图之前验证url参数

在我的应用程序中，我需要验证url中的参数

id

，然后相应地呈现视图（即验证成功和失败时的不同视图）。下面是示例代码：

routes.js

// just relevant lines of code:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Foo from '../containers/foo';

const AppRoutes = (
  <Route component={Base} path="/">
    <Route component={Foo} path="/url/:id"/>
  </Route>
);
export default AppRoutes;    

"use strict";
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

function fetchId(method, url, id, callback){
  var xhr = createCORSRequest(method, url);
  if (!xhr) return;
  xhr.addEventListener("readystatechange", callback);
  xhr.setRequestHeader("content-type", "application/json");
  xhr.send(JSON.stringify(query));
}

function isValid(id){
  let url = 'https://some/api/url/';
  return fetchId('POST', url, id, function(){
    return (this.readyState===4 && this.responseText.length>0) ? true : false;
  });
}
export default {isValid}

service.js

// just relevant lines of code:
import React from 'react';
import { Route, IndexRoute } from 'react-router';
import Foo from '../containers/foo';

const AppRoutes = (
  <Route component={Base} path="/">
    <Route component={Foo} path="/url/:id"/>
  </Route>
);
export default AppRoutes;    

"use strict";
function createCORSRequest(method, url) {
  var xhr = new XMLHttpRequest();
  if ("withCredentials" in xhr) {
    // XHR for Chrome/Firefox/Opera/Safari.
    xhr.open(method, url, true);
  } else if (typeof XDomainRequest != "undefined") {
    // XDomainRequest for IE.
    xhr = new XDomainRequest();
    xhr.open(method, url);
  } else {
    // CORS not supported.
    xhr = null;
  }
  return xhr;
}

function fetchId(method, url, id, callback){
  var xhr = createCORSRequest(method, url);
  if (!xhr) return;
  xhr.addEventListener("readystatechange", callback);
  xhr.setRequestHeader("content-type", "application/json");
  xhr.send(JSON.stringify(query));
}

function isValid(id){
  let url = 'https://some/api/url/';
  return fetchId('POST', url, id, function(){
    return (this.readyState===4 && this.responseText.length>0) ? true : false;
  });
}
export default {isValid}

现在

componentWillMount（）

中的

console.log（isValid（this.props.params.id）

总是打印

未定义的
，无论
id
是否有效。似乎有两个问题，要么我没有正确返回
isValid（）
的布尔响应，要么我错误地使用了
componentWillMount（））
。我也想到了，并且知道
componentWillMount（）
实际上是在
render（）之前触发的

有人能指出真正的问题并纠正我哪里做错了吗？
不清楚什么叫Foo组件。
但看起来类
Foo
中缺少构造函数

class Foo extends Component {
  constructor(props) {
    super(props);
    this.state = { check : true };
  }
  componentWillMount() {
    console.log(this.props.params.id);
  }
  render() {
      //...
  }
}

有关详细信息，请参阅。
您似乎正在尝试进行一些条件渲染。我在学习react-If时遇到了这个问题（假设这是您正在寻找的）。如果是这样，那么您将这样做：


渲染(
{this.state.isTrue？（
如果this.state.isTrue为true，则渲染此！
) : (
否则，渲染这个！
)}
)


因此，在上面的代码块中，您可以执行某种条件检查，以查看this.props.params.id==='some string'，然后当它为真时，它将呈现第一组div

如果这不起作用或者您正在寻找其他解决方案，请给我发消息！
注意：我不确定您的
XMLHttpRequest
的其余部分是否起作用，因为我从来没有直接使用过它，而不是像fetch或axios那样使用库为我管理它

问题在于您的方法是否有效

function isValid(id){
  let url = 'https://some/api/url/';
  return fetchId('POST', url, id, function(){
    return (this.readyState===4 && this.responseText.length>0) ? true : false;
  });
}

问题是返回函数内部的布尔值，
isValid
函数实际上返回的是
fetchId
函数的结果（该函数不返回任何内容，因此您正在记录
未定义的
）

为什么会发生这种情况？

嗯，您的请求是在后台执行的，不会阻止执行。因此在
isValid
函数的末尾，它没有返回的布尔值

你能做些什么？

与
fetchId
函数类似，您的
isValid
函数应该接受回调，以延迟其状态设置，直到请求完成

function isValid(id, callback){
  let url = 'https://some/api/url/';
  fetchId('POST', url, id, function(){
    callback(this.readyState===4 && this.responseText.length>0)
  });
}

你这么叫它

componentWillMount(){
  isValid(this.props.params.id, valid => {
    if (!valid) {
      console.log(isValid(this.props.params.id));
      this.setState({
        check : false
      });
    }
  });
}

但是我在回调中有回调，这一切都变得太难遵循了！

你没有错。如果你尝试完全在react组件中进行这些类型的交互，它们会变得非常混乱。你可以很容易地使用和分离状态管理、操作和视图。
似乎没有帮助。此外，构造函数中的
将是这种状态，因为只有状态才会生成
未定义错误谢谢我固定说
这个。state
什么是调用Foo？参数来自react router吗？如果是，你能告诉我们你的路由是如何设置的吗？@JoPeyper我已经更新了这个问题，提到了
routes.js
的相关行。请随时询问是否还缺少一些东西。还有，你要找什么ID在您的路线上？您正在尝试进行电子邮件验证吗？我已经为您更新了呈现部分。请再看一次，这是我应用条件的方式，但我认为这不是条件问题。问题是
控制台中的
日志
组件willmount（）
总是打印
未定义的
，而它应该是
真的
或
假的
。关于验证，不，它只是一个随机的（某种产品）id Validational因此，您提到的三元条件处理解决方案仅用于一行返回/呈现。尽管这些回调似乎不是完美的选项，但还有许多其他线程在等待最终的正确答案。我使用有效id应用了您的更改，作为响应，它呈现了正确的部分，但在一秒钟内，它再次打印<代码>如果（！valid）
，我添加了
console.log（valid）
并且它会打印两次
false
和一次
true
。这意味着函数运行了三次，知道为什么会发生这种情况吗？可能是其他原因导致组件装载了几次不同的时间。如果不运行并调试它，很难判断。要正确执行此操作，您确实需要查看redux。redux将改变您对组件中状态的看法，使复杂的加载状态变得更容易。尝试将
控制台。在
组件中调用
isValid
之前，记录
，并查看调用频率。可能是多次装载，也可能是
多次调用您的回调>XMLHttpRequest
.ok。实际上，我现在更倾向于避免重复。我将尝试更多的方法，包括用一些库替换
XMLHttpRequest
。希望能有一些效果。