React-Router在ajax调用中对setState()抛出Invariant Violation

rit*_*ter 4 ajax reactjs react-router

我正试图找到一个棘手的错误,我正在使用react-router.出于某种原因,在顶级页面路由中设置我的一个子组件的状态会导致以下错误:

Uncaught Error: Invariant Violation: Missing "userId" parameter for path "/user/:userId" 
Run Code Online (Sandbox Code Playgroud)

无论我是否导航到该路径,都会发生此错误.我的路线看起来如下:

var routes = (
  <Routes>
    <DefaultRoute handler={LoginPage} />
    <Route name="login" handler={LoginPage} />
    <Route name="home" handler={HomePage} />
    <Route name="category" path="/category/:category" handler={CategoriesPage}/>
    <Route name="profile" path="/user/:userId" handler={ProfilePage}/>
  </Routes>
);
Run Code Online (Sandbox Code Playgroud)

我的ajax调用看起来像这样:

var Feed = React.createClass({
  getInitialState: function() {
    return { feedItems: [] };
  },

  componentDidMount: function() {
    $.ajax({
    url: '/api/transactions',
    dataType: 'json',
    success: function(transactions) {
      this.setState({ feedItems: transactions });
    }.bind(this),
    error: function(xhr, status, err) {
      console.error(this.props.url, status, err.toString());
    }.bind(this)
  });
},

....
Run Code Online (Sandbox Code Playgroud)

此Feed在一堆页面上生成,包括HomePage和ProfilePage.我在弄清楚:userId参数如何与feed中的Ajax调用相关时遇到了很多麻烦,但这就是堆栈跟踪引导我的地方.任何有关这里发生的事情的帮助将不胜感激.

更新:发现问题.我的mongo数据库已经过时了(模型架构发生了变化),这导致了许多问题,冒出了这个Invariant Violation.我仍然不完全确定这两者是如何相关的,但删除旧对象解决了问题.

xan*_*iel 12

谢谢,@ritmatter自己解决这个问题!作为参考,这里的答案与文档的链接.

请记住,在所有反应路由器 <Link>,你在你的代码元素,包括params用于指向一个参数化的路线链接对象:

<Link to="BillingInfo" params={userId:"user876718236"}>Your Billing Information</Link>
<!-- linking to /user876718236/billing-info -->
Run Code Online (Sandbox Code Playgroud)

在这里查看详细信息:react-router/Link

更新 [2015-03-29]更正了JSX param braces.感谢@Akay.

  • 正确的语法params = {{userId:"user876718236"}} (5认同)