我正在遵循
reactjs错误
Cannot read property 'map' of undefined'mapCommentList当从
进入prop时，什么会导致undefined变成CommentBox？CommentList
// First component
var CommentList = React.createClass({
render: function() {
var commentNodes = this.props.data.map(function (comment){
return <div><h1>{comment.author}</h1></div>;
});
return <div className="commentList">{commentNodes}</div>;
}
});
// Second component
var CommentBox = React.createClass({
getInitialState: function(){
return {data: []};
},
getComments: function(){
$.ajax({
url: this.props.url,
dataType: 'json',
success: function(data){ this.setState({data: data}) }.bind(this),
error: function(xhr, status, err){ console.error(url, status, err.toString()) }.bind(this)
});
},
componentWillMount: function(){
this.getComments()
},
render: function(){
return <div className="commentBox">{<CommentList data={this.state.data.comments}/>}</div>;
}
});
React.renderComponent( <CommentBox url="comments.json" />, document.getElementById('content'));
首先，设置更安全的初始数据：
getInitialState : function() {
return {data: {comments:[]}};
},
并确保你的ajax数据。
如果您遵循上述两个说明（如演示），它应该可以工作。
更新：您可以用条件语句包装 .map 块。
if (this.props.data) {
var commentNodes = this.props.data.map(function (comment){
return (
<div>
<h1>{comment.author}</h1>
</div>
);
});
}
我想你忘记换衣服了
data={this.props.data}
到
data={this.state.data}
在CommentBox的渲染函数中。当我遵循教程时，我犯了同样的错误。因此整个渲染函数应该看起来像
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.state.data} />
<CommentForm />
</div>
);
}
而不是
render: function() {
return (
<div className="commentBox">
<h1>Comments</h1>
<CommentList data={this.props.data} />
<CommentForm />
</div>
);
渲染前需要放入数据
应该是这样的：
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
React.render(
<CommentBox data={data}/>,
document.getElementById('content')
);
而不是这个：
React.render(
<CommentBox data={data}/>,
document.getElementById('content')
);
var data = [
{author: "Pete Hunt", text: "This is one comment"},
{author: "Jordan Walke", text: "This is *another* comment"}
];
如果
"Cannot read property 'map' of undefined""this.props.data"更好地设置条件来检查数组，如
if(this.props.data){
this.props.data.map(........)
.....
}
我考虑在taggon对这个问题的回答下发表评论，但是，我觉得对于那些对细节感兴趣的人来说，它应该有更多的解释。
未捕获的类型错误：无法读取未定义的属性“值”严格来说是一个 JavaScript 错误。
（请注意，值可以是任何值，但对于此问题，值是“地图”）
了解这一点至关重要，这样您就可以避免无休止的调试循环。
这个错误很常见，尤其是刚开始使用 JavaScript（及其库/框架）时。
对于
React// Follow this example to get the context
// Ignore any complexity, focus on how 'props' are passed down to children
import React, { useEffect } from 'react'
// Main component
const ShowList = () => {
// Similar to componentDidMount and componentDidUpdate
useEffect(() => {// dispatch call to fetch items, populate the redux-store})
return <div><MyItems items={movies} /></div>
}
// other component
const MyItems = props =>
<ul>
{props.items.map((item, i) => <li key={i}>item</li>)}
</ul>
/**
The above code should work fine, except for one problem.
When compiling <ShowList/>,
React-DOM renders <MyItems> before useEffect (or componentDid...) is called.
And since `items={movies}`, 'props.items' is 'undefined' at that point.
Thus the error message 'Cannot read property map of undefined'
*/
作为解决这个问题的一种方法，@taggon 给出了一个解决方案（请参阅第一个 anwser 或链接）。
解决方案：设置初始/默认值。
在我们的示例中，我们可以通过声明空数组的值来避免items“未定义”。default
为什么？这允许 React-DOM 最初渲染一个空列表。
当执行或useEffect方法时，组件将使用填充的项目列表重新渲染。componentDid...
// Let's update our 'other' component
// destructure the `items` and initialize it as an array
const MyItems = ({items = []}) =>
<ul>
{items.map((item, i) => <li key={i}>item</li>)}
</ul>
这是我的问题：
{props.users.map((item,index)=>(
<div className="items" key={index}>
<div className="text-center">
<p className="fs-12">{item}</p>
</div>
</div>
))}
然后我刚刚通过添加此代码解决了问题。它的工作原理就像 if 和 else 语句一样。
{ props.users ? props.users.map((item,index)=>(
<div className="items" key={index}>
<div className="text-center">
<p className="fs-12">{item}</p>
</div>
</div>
)) : <p>Users is empty</p>}
出现这个错误主要是因为没有找到数组。只需检查您是否已映射到正确的数组即可。检查数组名称或声明。
这对我有用。如果我使用 props.worktyp.map 它会抛出一个错误：地图未定义。
//App.js
const worktyp = [
"Full-time",
"casual",
"part-time",
"contract"
];
function Main(props){
return(
<section>
<p>This the main body</p>
<ul style = {{textAlign:"left"}}>
**{worktyp.map((work) => <li>{work}</li>)}**
</ul>
</section>
);
}
function App() {
return (
<div className="App">
<Header name="initial"/>
**<Main work={worktyp}/>**
<Foot year ={new Date().getFullYear()}/>
</div>
);
}
//index.js
ReactDOM.render(
<App />,
document.getElementById('root')
);
api调用数据时react js 应用程序：[{程序名称：“字符串”，状态：“重复”}]
在我的例子中，我通过添加“？”解决了这个错误。状况。
<div className="hotelContainer__img">
{photos.map((item, index) => (
<img
src={item}
alt=""
key={index}
onClick={() => handleOpen(index)}
/>
))}
</div>
<div className="hotelContainer__img">
{photos?.map((item, index) => (
<img
src={item}
alt=""
key={index}
onClick={() => handleOpen(index)}
/>
))}
</div>
就我而言，当我尝试向
Promise.allPromise.all([1,2]).then(([num1, num2]: [number, number])=> console.log('res', num1));
如果删除
: [number, number]