FourSquare Axios 请求 - ReactJs - 无法读取未定义的属性“地图”

Question

请帮忙:)

我正在做简单的 Axios 获取请求，在“组件安装”中。在一个简单/基本的反应应用程序中。我正在尝试获取伦敦的 FourSquare 地点数据。

我的功能有效，因为我可以 console.log 数据。这是我的组件安装代码：

// FOURSQUARE COMPONENT DID MOUNT
componentDidMount() {
  console.log('COMPONENT DID MOUNT');
  axios.get('https://api.foursquare.com/v2/venues/explore…')

  .then(res => {
   console.log('data', res.data.response.groups[0].items);
// console.log('data',res.data.response.groups[0].items[0].venue.name);
   this.setState(
   { places: res.data.response.groups[0].items}
  );
 });
}

请在此处附上console.log 的截图。 https://i.imgur.com/DPPxwdW.png

但是，我正在尝试映射数据，以在对象数组/res.data 中获取“venue.name”。但我不断收到以下错误：

无法读取未定义的属性“地图”

这是我试图通过数据映射的方式......

const Loaders = ({places}) => {

  return (

    <section>
      <div className="columns is-multiline">
        {places.map((place, i) => <div className="column is-one-quarter" key={i}>
          <ul>
            <li>
              <div className="card-image">
                <figure className="image">
                 <h2 className="has-text-centered has-text-grey">title: {place.venue.name}</h2>
                </figure>
              </div>
            </li>
          </ul>
        </div>)}
      </div>
    </section>
  );
};

export default Loaders;

Answer 1

发生这种情况的原因是因为请求是异步的，并且在获得响应之后设置了场所状态。所以最初，places 是未定义的。 可以在加载状态下渲染加载指示器

常量加载器 = ({places}) => { 如果（！地方）{ 返回加载中... }

返回（

<section>
  <div className="columns is-multiline">
    {places.map((place, i) => <div className="column is-one-quarter" key={i}>
      <ul>
        <li>
          <div className="card-image">
            <figure className="image">
             <h2 className="has-text-centered has-text-grey">title: {place.venue.name}</h2>
            </figure>
          </div>
        </li>
      </ul>
    </div>)}
  </div>
</section>

); };

或在构造函数中将位置初始化为空数组

constructor(props) {
   this.state = {
     places = []
   }
}

Answer 2

问题是this.state.places 在某些时候是未定义的。问题可能是初始状态在开始时未设置为空数组，或者逻辑中的某些内容更改了places 的值。尝试

class Foo extends React.Component {
    state = {
        places: []
    }

    render() {
        return <Loaders places={this.state.places} />>
    }
}