javascript - 循环 JS 对象仅适用于 return 语句，否则会抛出 undefined

Question

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 加载数据的函数时运行，请有人协助

Answer 1

试试这个

<小时/>

这是第一个像你一样的方法:

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”