如何使用从 Reactjs 中的 fetch() 获得的 JSON 数据填充引导网格？答案

【问题标题】：How to populate bootstrap grids with JSON data obtained from fetch() in Reactjs?如何使用从 Reactjs 中的 fetch() 获得的 JSON 数据填充引导网格？
【发布时间】：2018-07-01 06:01:44
【问题描述】：

我想将 JSON 数据填充到引导网格系统中。 JSON 响应：

{
  "_id": "5a63051735aaddd30d1d89f8",
  "id": 45,
  "season": 2008,
  "city": "Bangalore",
  "team1": "Royal Challengers Bangalore",
  "team2": "Delhi Daredevils",
  "toss_winner": "Delhi Daredevils",
  "toss_decision": "field",
  "result": "normal",
  "dl_applied": 0,
  "winner": "Delhi Daredevils",
  "win_by_runs": 0,
  "win_by_wickets": 5,
  "player_of_match": "SP Goswami",
  "venue": "M Chinnaswamy Stadium",
  "umpire1": "SJ Davis",
  "umpire2": "GA Pratapkumar",
  "umpire3": ""
}

JSON 响应返回大约 577 个 JSON 对象现在我想将上面的 JSON 数据填充到引导网格系统中。

main.js

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

    componentDidMount(){
        fetch('api/matches')
        .then(res => res.json())
        .then(matches => 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>
    );
  }
}

在上面的代码中，我试图显示 matches[0].season matches[5].season matches[8].season 但显示错误请参见下面的屏幕截图。

【问题讨论】：

标签： javascript json twitter-bootstrap reactjs

【解决方案1】：

我们可以使用fetch() 填充引导网格，请参见下面的代码：

componentDidMount() {
  fetch('api/matches')
    .then(res => res.json()) // It resolves the promise with a JSON object
    .then(res => {
      console.log(res)
      this.setState({
        matches: res,
      })
    })
}

同样在渲染函数中添加条件语句：

render() {
  if (this.state.matches.length === 0) {
    return <div>>Loading...</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>
  )
}

【讨论】：

【解决方案2】：

只需要等待setState() 被调用，这会反过来填充matches 数组。请记住，由于您正在使用componentDidMount，以及进行异步调用来获取数据，因此组件将已经呈现，并将this.state.matches 设置为空数组。

这是一个快速的CodePen。

这也可能有所帮助 - Where to Fetch Data

【讨论】：

为什么我会收到这个错误 -> imgur.com/a/YjULD 这是我的代码 -> imgur.com/a/5jhaJ 并且 JSON 响应是这样的 -> imgur.com/a/16QSN
请告诉我应该在我的代码中进行哪些更改，请参阅上面的 imgur 链接截图
我认为我收到了错误，因为没有从 REST api 端点获得正确的响应。你能告诉我我应该在我的代码中做什么，因为在你的代码中你已经完成了matches.data，这在我的代码中是不可能的，因为我已经创建了 API 端点。
可以注释掉<div>s，查看返回值。只要它是一组对象（因为这是您使用它的方式），就没有关系。尝试将您的 div 包装在条件语句中 - this.state.matches.length > 0。
是的，如果我添加条件语句，它可以正常工作，但如果我不添加它，它会再次抛出错误，为什么会发生这种情况？