Menu
I'm working with Reactjs, writing a menu component.
"use strict";
var React = require("react");
var Menus = React.createClass({
item_url: function (item,categories,articles) {
console.log('afdasfasfasdfasdf');
var url='XXX';
if (item.type == 1) {
url = item.categoryId == null ? 'javascript:void(0)' : path('buex_portal_browse_category', {slug: categories[item.categoryId].slug});
} else if (item.type == 2) {
url = item.articleId == null ? 'javascript:void(0)' : path('buex_portal_view_article', {slug: articles[item.articleId].slug, id: item.articleId});
} else {
url = item.url;
}
return url;
},
render: function () {
// console.log(this.props.menus); // return correctly
var menuElements = this.props.menus.map(function (item1) { // return fault : 'cannot read property 'props' of undefined '
return (
<div>
<li>
<a href={this.item_url(item1, this.props.categories, this.props.articles )}>{item1.name} // the same fault above
<i class="glyphicon glyphicon-chevron-right pull-right"></i>
</a>
<div class="sub-menu">
<div>
{item1._children.map(function (item2) {
return (
<div>
<h4>
<a href={this.item_url(item2, this.props.categories, this.props.articles)}>{ item2.name }</a>
</h4>
<ul>
{item2._children.map(function (item3) {
return (
<div><li><a href={this.item_url(item3, this.props.categories, this.props.articles) }>{ item3.name }</a></li></div>
);
})}
</ul>
</div>
);
})}
</div>
</div>
</li>
</div>
);
});
return (
<div class="menu">
<ul class="nav nav-tabs nav-stacked">
{menuElements}
</ul>
</div>
);
}
});
Whenever I use 'this' inside map function it is undefined, but outside it is no problem.
The error:
"Cannot read property 'props' of undefined"
Anybody help me ! :((
874
TypeError: map() is not a function in React # The "TypeError: map is not a function" occurs when we call the map() method on a value that is not an array. To solve the error, console. log the value you're calling the map() method on and make sure to only call map on valid arrays.
Why is this undefined In React event handler? This is because when you use an arrow function, the event handler is automatically bound to the component instance so you don't need to bind it in the constructor. When you use an arrow function you are binding this lexically.
createElement()Create and return a new React element of the given type. The type argument can be either a tag name string (such as 'div' or 'span' ), a React component type (a class or a function), or a React fragment type. Code written with JSX will be converted to use React.createElement() .
Using memo will cause React to skip rendering a component if its props have not changed. This can improve performance.
Array.prototype.map() takes a second argument to set what this refers to in the mapping function, so pass this as the second argument to preserve the current context:
someList.map(function(item) {
...
}, this)
Alternatively, you can use an ES6 arrow function to automatically preserve the current this context:
someList.map((item) => {
...
})
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
