反應兩次安裝組件，但第二次沒有收到道具

Question

import React, {Component} from 'react'; 
import { Link } from 'react-router'; 


class AsideNav extends Component{ 
    constructor(props, context) { 
    super(props, context); 

    this.state = { 
     navigation: '' 
    }; 
} 

componentWillMount(){ 
    console.log(this.props.data.navigation); // data from parent received 
    this.setState({ 
     navigation: this.props.data.navigation.map(function(el, index){ 
      return(
       <Link key={index} className={"aside-nav__link " + (el.modifier ? ("aside-nav__link" + el.modifier) : '')} to={el.url}>{el.name}</Link> 
      ) 
     }) 
    }) 
} 



render() { 
    console.log(this.state.navigation); // JSX for navigation is ready 
    return (
     <nav className="aside-nav"> 
      <span className="aside-nav__title" >Категории</span> 
       {this.state.navigation} 
     </nav> 
    ); 
} 

} 

export default AsideNav 

後（貌似）成功執行的代碼，它會顯示我一個空塊和

Uncaught TypeError: Cannot read property 'navigation' of undefined at AsideNav.componentWillMount...

Answer 1

SE componentWillReceiveProps（newProps）來獲得道具第二次構造函數和componentDidMount方法只執行一次。並且還要檢查數據是否可用。

import React, {Component} from 'react'; 
import { Link } from 'react-router'; 


class AsideNav extends Component{ 
    constructor(props, context) { 
    super(props, context); 

    this.state = { 
     navigation: '' 
    }; 
} 
componentWillReceiveProps(newProps) 
{ 
console.log(newProps.data.navigation); // data from parent received 
    this.setState({ 
     navigation: newProps.data &&newProps.data.navigation.map(function(el, index){ 
      return(
       <Link key={index} className={"aside-nav__link " + (el.modifier ? ("aside-nav__link" + el.modifier) : '')} to={el.url}>{el.name}</Link> 
      ) 
     }) 
    }) 
} 

componentWillMount(){ 
    console.log(this.props.data.navigation); // data from parent received 
    this.setState({ 
     navigation: this.props.data && this.props.data.navigation.map(function(el, index){ 
      return(
       <Link key={index} className={"aside-nav__link " + (el.modifier ? ("aside-nav__link" + el.modifier) : '')} to={el.url}>{el.name}</Link> 
      ) 
     }) 
    }) 
} 



render() { 
    console.log(this.state.navigation); // JSX for navigation is ready 
    return (
     <nav className="aside-nav"> 
      <span className="aside-nav__title" >Категории</span> 
       {this.state.navigation} 
     </nav> 
    ); 
} 

} 

export default AsideNav 

Answer 2

的變化：

1.不要將ui items存儲在狀態變量，總是存儲數據之用，然後動態地生成ui元件。當時

2.使用componentWillReceiveProps方法，如果你在父組件props值進行任何更改將被調用，更新子組件的state值。

3.既然你只是想從props數據創建的項目，直接使用props，而不是存儲任何東西。

寫這樣的：

import React, {Component} from 'react'; 
import { Link } from 'react-router'; 


class AsideNav extends Component{ 
    constructor(props, context) { 
     super(props, context); 

     this.state = { }; 
    } 

    renderLinks(){ 
     let data = this.props.data; 
     return data && Array.isArray(data.navigation) && data.navigation.map((el, index) => { 
      return(
       <Link 
        key={index} 
        className={"aside-nav__link " + (el.modifier ? ("aside-nav__link" + el.modifier) : '')} 
        to={el.url} 
       > 
        {el.name} 
       </Link> 
      ) 
     }) 
    } 



    render() { 
     console.log(this.props.data) 
     return (
      <nav className="aside-nav"> 
       <span className="aside-nav__title" >Категории</span> 
       {this.renderLinks()} 
      </nav> 
     ); 
    } 

} 

Answer 3

import React from 'react'; 
import {render} from 'react-dom'; 
import { Router, Route, browserHistory } from 'react-router'; 


import App from './app'; 
import PageDashboard from './page-templates/page-dashboard'; 
import PageRating from './page-templates/page-rating'; 


import './styles/css/style.css'; 

//render(<PageDashboard />, document.querySelector('.main-wrapper')); - before 

render( 
    <Router history={browserHistory}> 
     //<Route path="/public/" component={App} /> - before 
     <Route path="/public/" component={PageDashboard} /> // - now 
     <Route path="/public/rating" component={PageRating} /> 
    </Router>, document.querySelector('.main-wrapper') 
); 

位於根文件 'main.js' 的問題。我不小心安裝了兩個帶有普通兒童的部件。