2016-03-24 12 views
1

Я использую React с реактивным маршрутизатором и реакцией-редукцией. Когда компонент монтируется, я отправляю для получения данных из базы данных. Мой родительский компонент имеет этотреквизиты, не определенные в рендере, но значение, отображаемое в возврате рендеринга для компонента первого времени, смонтировано

const TopComp = React.createClass({ 
componentWillMount(){ 
    this.props.dispatch(getData(this.params.id)) 
}, 
render() { 
    <ChildComp data={this.props.data} /> 
} 
}) 
function mapStateToProps(state){ 
    return {data:state.data} 
} 
export default connect()(TopComp) 

Мой ребенок Компонент выглядит следующим образом:

const ChildComp = React.createClass({ 
getInitialState() { 
    console.log(this.props.data) 
//empty for the first time but gets data other times 
} 
render(){ 
console.log(this.props.data) //prints undefined 
return(
    {this.props.data} //gives the data 
) 
} 
}) 

Также мой TopComp Updates с щелчком по ссылкам на его родительский компонент. Он получает различные params.id и получает данные для каждого из них.

ответ

1

Вы не передаете свою mapStateToProps функцию для подключения ... так что я удивлен, что вы даже получаете доступ к своим данным состояния вообще.

export default connect(mapStateToProps)(TopComp) 

, как для this.props.data печати Неопределенные -> вы только выборки данных при монтирует компонент родителя - это то делает запрос XHR т.д., так что на первый this.props.data в компоненте ребенка будет быть неопределенным, потому что запрос еще не завершен.

+0

Фактически я пропустил mapStateToProps, пока я печатал здесь. Я, конечно, столкнулся с проблемой, что вы упомянули, что компонент не получает реквизиты в initial render(). Можете ли вы рассказать мне, как это можно сделать по-другому, поэтому я получу реквизит в первоначальном рендеринге в Ребенке – Avinash