Question

渲染时出现此错误，我是React JS的新手，请告诉我在映射中发生什么错误？请帮忙。我正在使用axios。而且我正试图从// https://www.reddit.com/r/space.json

获取数据

import React, { Component } from 'react';
import axios from 'axios';

class Apicall extends Component {


  componentWillMount(){
    this.getReddit();
  }

  getReddit(){
    axios.get(`https://www.reddit.com/r/${this.state.subr}.json`)

    .then(res =>{
      const posts = res.data.data.children.map(obj =>obj.data);
      this.setState({posts});
    });

  }

  constructor(props){
    super(props);


    this.state = {
      post:[],
      subr:'space'
    };
    this.getReddit = this.getReddit.bind(this);
  }






  render(){
    return(
      <div>
        <h1>{`/r/${this.state.subr}`}</h1>
        <ul>
          {this.state.posts.map(post =>
            <li key={post.id}>{post.title}</li>

          )}
        </ul>
      </div>
    );
  }
}


export default Apicall;

Answer 1

将来发布时，请提供您遇到的完整错误。它包含有用的信息，例如行号。

我可以看到

this.state.posts 要么 res.data.data.children

为了返回该错误，必须返回null，因为它们都调用了map函数。

this.state.posts特别是复数，而状态是使用单数形式定义的：

this.state = {
  post:[],
  subr:'space'
};

因此，将其重命名为复数版本可以解决您所描述的错误

this.state = {
  posts:[],
  subr:'space'
};

无法读取未定义的React JS的属性'map'

1 个答案: