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数据填充到bootstrap中以在网格系统中显示它但是我在这些行中得到错误，说下面的行有TypeError：

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

Answer 1

在不从您的API获取的情况下访问matches[0]，matches[5]或matches[8]会破坏您的应用。

我建议将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()

注意/。

希望这有帮助吗？请让我知道。

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

2 个答案: