JSX 中带有 return 语句的第一个方法可以正常工作
<div>
{this.state.list.map(item => {
return <h6>{item.location.formattedAddress[0]}</h6>
})}
</div>
但这通常应该给出相同的结果:
render() {
const listItems = this.state.list.map((item, index) => (
<h6>{item.location.formattedAddress[0]}</h6>
));
return (
{listItems}
)
}
TypeError: Cannot read property 'map' of undefined
它也是在加载页面时运行,而不是在执行从 API 加载数据的函数时运行,请有人协助
最佳答案
试试这个
<小时/>这是第一个像你一样的方法:
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{ id: 1, title: 'React' },
{ id: 2, title: 'Angular' },
{ id: 3, title: 'Vue' }
]
};
}
render() {
return (
<div>
{this.state.list && this.state.list.map(li => (
<h2 key={li.id}>{li.title}</h2>
))}
</div>
);
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root">
<div>
这是您期望它起作用的第二种方法
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
list: [
{ id: 1, title: 'React' },
{ id: 2, title: 'Angular' },
{ id: 3, title: 'Vue' }
]
};
}
render() {
const listItems = this.state.list ? this.state.list.map(li => (
<h2 key={li.id}>{li.title}</h2>
)) : '';
return <div>{listItems}</div>;
}
}
ReactDOM.render(<App />, document.getElementById('root'));
<script crossorigin src="https://unpkg.com/react@16/umd/react.development.js"></script>
<script crossorigin src="https://unpkg.com/react-dom@16/umd/react-dom.development.js"></script>
<div id="root"><div>
我在渲染之前添加了一些小检查,以确保您不会收到错误:无法读取未定义的属性“map”
关于javascript - 循环 JS 对象仅适用于 return 语句,否则会抛出 undefined,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52870392/