React - 道具没有定义

时间:2017-11-06 07:14:55

标签: reactjs

我有两个组成部分。

  1. MypropDestructuring.jsx(主要组件)
  2. MypropDestructuringMessage.jsx(用于道具解构)(我是React中解构概念的新手)
  3. 我认为我在(MypropDestructuringMessage.jsx)道具解构中做错了。

    在控制台日志中我收到以下错误 -

      

    未捕获的ReferenceError:未定义道具   MypropDestructuringMessage.render(index.js:33930)

    代码:

    MypropDestructuring.jsx

    // Let's import react
    import React from "react";
    
    // Import custom component
    import MypropDestructuringMessage from "./MypropDestructuringMessage.jsx";
    
    
    // Let's create component [[ MypropDestructuring ]]
    class MypropDestructuring extends React.Component{
    
        // Let's create custom method
        _myProfile() {
    
            const myProfileData = [
                {
                    id : 1,
                    name : "Neon",
                    age : 25,
                    location : "UK",
                    skill : "UI Dev"
                }
            ];
    
            // return
            return myProfileData.map( (profileArrg) => {
    
                    return( 
                        <MypropDestructuringMessage key={profileArrg.id} name={profileArrg.name} age={profileArrg.age} location={profileArrg.location} skill={profileArrg.skill} /> 
                    );
                }
            );
    
        }
    
        render(){
    
            const showProfile = this._myProfile();
            return(
                <section>
    
                    <p>&nbsp;</p>
                    <h6> Prop Desturcturing </h6>
                    <hr />
    
                    <div>
                        {showProfile}
                    </div>
    
                </section>
            );
        }
    }
    
    
    // Let's render ReactDOM
    export default MypropDestructuring;
    

    MypropDestructuringMessage.jsx

    // Let's import react
        import React from "react";
    
        // Let's create component [[MypropDestructuringMessage]]
        class MypropDestructuringMessage extends React.Component{
            render(){
    
    
                // Props destructuring
                const {name, age, location, skill} = props;
    
                return(
    
                    <section>
    
                        <div>
                            <ul className="list-group">
                                <li className="list-group-item"> {name} </li>   
                                <li className="list-group-item"> {age} </li>   
                                <li className="list-group-item"> {location} </li>   
                                <li className="list-group-item"> {skill} </li>    
                            </ul>
                        </div>
    
                    </section>
                );
            }
        }
    
        // Let's pass data with [[ propTypes ]] - object
        MypropDestructuringMessage.propTypes = {
            name : React.PropTypes.string.isRequired,
            age : React.PropTypes.number.isRequired,
            location : React.PropTypes.string.isRequired,
            skill : React.PropTypes.string.isRequired
        }
    
    
        // Let's render ReactDOM
        export default MypropDestructuringMessage;
    

3 个答案:

答案 0 :(得分:5)

this.props使用props

const {name, age, location, skill} = this.props;

以下是Destructuring assignment

的文档

答案 1 :(得分:1)

道具被绑定到组件的上下文(this),它们不是全局的,这就是您收到错误的原因。使用this.props而不是props,除非您需要在构造函数中处理它们,因为在构造函数中this.props仍未定义。如果你在构造函数中需要props,它们将作为参数发送:

constructor(props) {
    super(props);
    // this.props is not defined at this point, so you have to use props
    // do something with props here
}

你可以阅读更多关于道具的反应in this article,它对React的新手或者想要梳洗他们知识的人有用,所以如果你有兴趣,请查看它!

答案 2 :(得分:0)

import React, { Component } from 'react'
import ReactDOM from 'react-dom'
import axios from 'axios'

import PairsList from './PairsList.jsx'
import RosterList from './RosterList.jsx'
import NewPairsForm from './NewPairsForm.jsx'

export default class App extends Component {
  constructor() {
    super()
    this.state = {
      rosterOrPairs: true,
      cohort: []
    }
    this.title = 'Pairs'
    this.onClickRoster = this.onClickRoster.bind(this)
    this.onClickPairs = this.onClickPairs.bind(this)
  }

  componentWillMount() {
    axios.get('/cohort')
      .then( (response) => {
        console.log('response.data is ', response.data)
        this.setState({ cohort: response.data })
      })
      .catch( (error) => console.log(error) )
  }

  onClickRoster() {
    this.setState({ rosterOrPairs: true })
  }

  onClickPairs() {
    this.setState({ rosterOrPairs: false })
  }

  render() {
    return(
      <div>
        <div className="title">{this.title}</div>
        <NewPairsForm cohort={this.state.cohort} />
        <div className="buttons-section">
          <button onClick={this.onClickRoster}>Roster</button>
          <button onClick={this.onClickPairs}>Pairs</button>
        </div>
        { this.state.rosterOrPairs ? <RosterList cohort={this.state.cohort} /> : <PairsList /> }
      </div>
    )
  }
}

ReactDOM.render(<App/>, document.getElementById('app'))