Question

刚刚开始学习Reactjs尝试使用此代码制作简单的业余爱好列表哪个是从具有名称和图像的数组中呈现但是未被捕获TypeError：无法读取属性＆＃39; profileData＆＃39;在Reactjs上未定义

＆＃13;

var DATA = {
    name: 'John Smith',
    imgURL: 'http://lorempixel.com/200/200/',
    hobbyList: ['coding', 'writing', 'skiing']
}
//main app component
var App = React.createClass({
    render:function(){
        return(
          <div>
              <Profile
                  name={this.props.profileData.name}
                  imgURL={this.prpos.profileData.imgURL}
                  />
              <Hobby
                 hobbyList = {this.props.profileData.hobbyList}
                  />
          </div>
        );
    }
});
//profile component
var Profile = React.createClass({
    render:function(){
        return(
        <div>
            <h3>{this.props.name}</h3>
            <img src={this.props.imgURL}/>
        </div>
        );
    }
});
var Hobby = React.createClass({
    render:function(){
        var hobbies = this.props.hobbyList.map(function(hobby,index){
            return (<li key={index}>{hobbies}</li>);
        });
        <div>
            <h3>My Hobbies</h3>
            <ul>{hobbies}</ul>
        </div>
    }
});
//render method
ReactDOM.render(
    <App profileData={DATA}/>,
    document.querySelector("#app")
);

＆＃13;

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8" />
    <title>React For EveryOne Tutorial</title>

</head>
<body>
<div id="app"></div>

<script src="demo.js" type="text/babel"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/0.14.7/react-dom.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/marked/0.3.2/marked.min.js"></script>

</body>
</html>

＆＃13;

Answer 1

你有几个错误

在App组件中有拼写错误，应为this.props而不是this.prpos
```
this.prpos.profileData.imgURL
     ^^^^^ 
```

在return组件

中添加Hobby语句

return <div>
   <h3>My Hobbies</h3>
    <ul>{hobbies}</ul>
</div>

在Hobby中的.map组件中，您应使用hobby变量而不是hobbies
```
return (<li key={index}>{hobby}</li>);
```

Example

Answer 2

您错过了Hobby组件中的return语句以及"Hardcoded strings"中使用this.prpos.profileData.imgURL而非this.prpos的拼写错误：

this.props

Fiddle

获取未捕获的TypeError：无法读取属性＆＃39; profileData＆＃39;在Reactjs上未定义

2 个答案: