2014-10-12 3 views
4

Я пытаюсь найти сложную ошибку, с которой я столкнулся с реагирующим маршрутизатором. По какой-то причине установка состояния одного из моих дочерних компонентов в маршруте страницы верхнего уровня вызывает следующее сообщение об ошибке:React-Router бросает инвариантное нарушение на setState() в ajax-вызове

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

И мой Аякса вызов выглядит следующим образом:

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 в фиде, но это то, куда ведет меня трассировка стека. Любая помощь в том, что здесь происходит, будет высоко оценена.

ОБНОВЛЕНИЕ: Нашла проблему. Моя база данных монго была устаревшей (были изменены схемы моделей), что вызывало множество проблем, пузырящихся до этого инвариантного нарушения. Я все еще не совсем уверен, как эти два были связаны, но удаление старых объектов устранило проблему.

+0

Вы используете [Navigation mixin] (https://github.com/rackt/react-router/blob/master/docs/api/mixins/Navigation.md) где угодно? – FakeRainBrigand

+0

Является ли компонент неподвижным/уже установленным, когда вызывается «успешный» обратный вызов? – phtrivier

+0

Можете ли вы уточнить, что было не так, и что вы исправили? Я тоже сталкиваюсь с этим. – cdbitesky

ответ

12

Спасибо, @ritmatter для решения этого самостоятельно! Как ссылка, вот ответ со ссылкой на документы.

Помните, в все ваш реагировать-маршрутизатор<Link> элементы, которые вы имеете в своем коде, чтобы включить params объект для ссылок, указывающих на параметризуемый маршруту:

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

взглянуть здесь для подробностей: react-router/Link

UPDATE [2015-03-29] исправлены символы JSX param. Спасибо @Akay.

+5

Исправлены синтаксические параметры = {{userId: "user876718236"}} –

1

UPDATE: v1.0 (ноябрь 2015)

Именованные пути больше не поддерживается, ссылки на полные пути. Шаблоны строк в ES6 удобны для этого:

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

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

Changelog: Links От.