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

在（似乎）成功实现代码之后，它显示了一个空块和

未捕获的TypeError：无法在AsideNav.componentWillMount读取未定义的属性'navigation'...

Answer 1

的变化：

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 2

se componentWillReceiveProps（newProps）第二次获取props，因为构造函数和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 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'中的问题。我不小心安装了两个普通孩子的组件。

React两次安装组件，但第二次没有收到道具

3 个答案: