如何从 REST API 获取数据并在 reactjs 中使用 JSON 数据填充数组？

Question

我正在尝试使用来自 REST API 的 JSON 数据填充 matches:[]。我无法从 REST API 获取（）数据。

REST API 的 JSON 响应：

在 main.js 中：

import React, { Component } from 'react';

class Main extends Component {
    constructor(props){
        super(props);
        this.state = {
            matches:[]
        };
    }

    componentDidMount(){
        fetch('api/matches')
        .then(res => this.setState({matches}, () => console.log('Matches fetched...', matches)));
    }

    render() {
    return (
      <div>
          <div class="row">
            <div class="col-lg-4" styles="background-color:lavender;">{this.state.matches[0].season}</div>
            <div class="col-lg-4" styles="background-color:lavenderblush;">{this.state.matches[5].season}</div>
            <div class="col-lg-4" styles="background-color:lavender;">{this.state.matches[8].season}</div>
          </div>
      </div>
    );
  }
}

export default Main;

我稍后将 JSON 数据填充到引导程序中以在网格系统中显示它，但我收到错误，这些行显示以下行的 TypeError：

this.state.matches[0].season
this.state.matches[5].season
this.state.matches[8].season

Answer 1

访问matches[0]、matches[5] 或matches[8] 而不从您的API 中获取将会破坏您的应用程序。

我建议将render 方法更改为：

render() {
  if (this.state.loading) {
    return <div>Loading...</div>
  }
  if (this.state.matches.length === 0) {
    return <div>There aren't any matches !</div>
  }
  return (
    <div>
      <div class="row">
        <div class="col-lg-4" styles="background-color:lavender;">{this.state.matches[0].season}</div>
        <div class="col-lg-4" styles="background-color:lavenderblush;">{this.state.matches[5].season}</div>
        <div class="col-lg-4" styles="background-color:lavender;">{this.state.matches[8].season}</div>
      </div>
    </div>
  )
}

在你启动fetch之后，你仍然需要将响应解析成你想要的格式（本例中为JSON）。在那之后，你就可以使用setState：

state = {
  matches: [],
  loading: true
};
componentDidMount() {
  fetch('/api/matches')
    .then(res => res.json()) // It resolves the promise with a JSON object
    .then(res => {
      console.log(res) // make sure that matches is `res` directly or a neste object within `res` object
      this.setState({
        matches: res,
        loading: false
      })
    })
}

如果您需要更多关于fetch 及其工作原理的信息，我建议您阅读David Walsh's 的解释。

Answer 2

我可以看到你没有正确调用 api 路由。假设您确实以如下方式设置了 api -

app.get('/api/matches', (req, res) => {
  res.setHeader('Content-Type', 'application/json');
  res.send(JSON.stringify({ matches }));
});

我是你的反应代码，你可以调用 api 为 -

fetch('/api/matches).then()

注意/。

希望这有帮助吗？否则请告诉我。