4

反応ルーターで発生しているトリッキーなエラーを見つけようとしています。何らかの理由で、最上位のページ ルートで子コンポーネントの 1 つの状態を設定すると、次のエラーが発生します。

Uncaught Error: Invariant Violation: Missing "userId" parameter for path "/user/:userId"

このエラーは、そのパスに移動しているかどうかに関係なく発生します。私のルートは次のようになります。

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

そして、私の 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)
  });
},

....

このフィードは、HomePage と ProfilePage を含む一連のページで生成されます。:userId パラメーターがフィード内の Ajax 呼び出しにどのように関連している可能性があるかを理解するのに非常に苦労していますが、スタック トレースが私を導きます。ここで何が起こっているかについての助けをいただければ幸いです。

更新: 問題が見つかりました。私の mongo データベースは古かった (モデル スキーマが変更された) ため、多くの問題が発生し、この不変違反が発生しました。この 2 つがどのように関連していたのかはまだ完全にはわかりませんが、古いオブジェクトを削除すると問題が解決しました。

4

2 に答える 2

12

@ritmatter、これを自分で解決してくれてありがとう！参考までに、ドキュメントへのリンクを含む回答をここに示します。

パラメータ化されたルートを指すリンクのオブジェクトを含めるために、コードにあるすべてのreact-router 要素に覚えておいてください。<Link>params

<Link to="BillingInfo" params={userId:"user876718236"}>Your Billing Information</Link>
<!-- linking to /user876718236/billing-info -->

詳細については、こちらをご覧ください: react-router/Link

更新[2015-03-29] JSX パラメータのブレースを修正しました。@Akayに感謝します。

于 2014-12-21T20:34:03.247 に答える
1

更新: v1.0 (2015 年 11 月)

名前付きパスはサポートされなくなりました。完全なパスにリンクします。これには、ES6 の文字列テンプレートが便利です。

// v0.13.x
<Link to="user" params={{userId: user.id}}>Mateusz</Link>

// v1.0
<Link to={`/users/${user.id}`}>Mateusz</Link>

変更ログから: Links .

于 2015-11-11T16:53:09.180 に答える