不会让我访问 json 对象，我缺少什么？

Question

所以我正在尝试访问对象内的数组：

export default class App extends Component {
  constructor(props) {
    super(props);
    this.state = {
      data: {},
      isLoading: true
    }
  };

  componentDidMount() {
    fetch(`https://m0n5ter-crawler.herokuapp.com/api/articles/`, {
        method: "GET",
      })
      .then(res => res.json(res))
      .then(res => {
        this.setState({
          data: res._embedded.articles, //this is where im entering the array of objects
          isLoading: false
        })
      })
      .catch((err => {
        console.error(err);
      }));
  }

  render() {
    const {
      isLoading,
      data
    } = (this.state);
    console.log(data);
  }
}

这是我在控制台日志中得到的：

(1000) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, …]
[0 … 99]
0: {groups: Array(1), date: "2015-12-03", url: "https://www.scmagazine.com", title: "", _links: {…}}
1: {groups: Array(1), date: "2018-10-19", url: "https://www.scmagazine.com/", title: "", _links: {…}}
2: {groups: Array(1), date: "2018-06-26", url: "https://www.scmagazine.com", title: ""
[100 … 199]
[200 … 299]
[300 … 399]
[400 … 499]
[500 … 599]
[600 … 699]
[700 … 799]
[800 … 899]
[900 … 999]
length: 1000
__proto__: Array(0)

map 不是函数，forEach 是 undefined， 我试图对其进行键值，但值返回给我[object object] 或undefined。

我错过了什么？

Answer 1

您将数据作为对象 {} 初始化，第一次渲染从初始状态获取 data。

this.state = {
  data: {},
  isLoading: true
}

改成数组

this.state = {
  data: [],
  isLoading: true
}