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

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...

來源

2017-04-13 Ioann Bogolyubskiy

使用componentWillReceiveProps（newProps）第二次獲取道具作爲構造函數和componentDidMount方法只執行一次。 – Ved

其實，你的錯誤指出''undefined'上的'navigation'被調用，這意味着你在'props'中收到的'data'是未定義的。簡而言之，您不會在道具中收到「數據」。 – Panther

你能解釋兩次渲染是什麼意思嗎？ –

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

來源

2017-04-13 05:27:55 Ved

它的一個非常糟糕的解決方案，你永遠不應該存儲在狀態變量的UI項目，總是將數據存儲在狀態，並從渲染函數調用，需要爲此創建UI。他是初學者可能不知道這一點，因爲你提供的解決方案，你應該提到這一點。 –

@MayankShukla它不是我的解決方案。我只是指出他的錯誤來解決他的問題。 – Ved

這就是所謂的解決方案:)，你需要糾正他在做什麼，或者在提示你也在做這個錯誤:) –

的變化：

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

}

來源

2017-04-13 05:47:51

謝謝，但我再次看到相同的錯誤）我嘗試渲染組件沒有狀態（只使用道具） - 同樣的事情。也許問題出在那裏： https://www.dropbox.com/s/8fj9ozz4fyrmc0z/main-content.js?dl=0 –

對不起，沒有得到這個，哪裏是'AsideNav'組件，並從哪裏MainContent是得到的道具值，你可以顯示父組件的代碼（其中你調用'AsideNav'組件） –

https://www.dropbox.com/s/dj6xzax4kkku1cb/sidebar.js?dl=0 –

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' 的問題。我不小心安裝了兩個帶有普通兒童的部件。

來源

2017-04-13 12:03:48

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

回答

相關問題