javascript - 我如何突破 React 映射以显示具有两个值的对象，一个是数组，另一个是字符串或数字(结果)

Question

我正在创建一个现场比分网站，该网站将返回所有足球现场赛事。我正在使用 jquery 发送请求，然后获得一个具有修复程序的对象响应——这包含所有实时事件的数组，最后是结果——这计算了事件的数量 (21)；我无法映射此数据以便我可以在我的应用程序上显示它附加的是响应图像

import React from 'react';
import jQuery from 'jquery';
class Home extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      liveEvents: '',
      loading: true
    };
  }
  settingState = data => {
    this.setState({
      liveEvents: data.api
    });
  };
  componentDidMount() {
    var h = this;
    var settings = {
      async: true,
      crossDomain: true,
      url: 'https://api-football-v1.p.rapidapi.com/v2/fixtures/live',
      method: 'GET',
      headers: {
        'x-rapidapi-host': 'api-football-v1.p.rapidapi.com',
        'x-rapidapi-key': 'RAPIDAPI-KEY' //Private
      }
    };

    jQuery.ajax(settings).done(function(response) {
      h.setState({
        loading: false
      });
      h.settingState(response);
    });
  }
  render() {
    var { liveEvents, loading } = this.state;

    return (
      <div className="livesheet">
        {loading ? 'loading ' : console.log(liveEvents)}
      </div>
    );
  }
}
export default Home;

Answer 1

请引用what is JSX .

您需要将 liveEvents 中的数据映射到 ReactElement/ReactElement 数组:

class Home extends React.Component {
  ...
  render() {
    const { liveEvents, loading } = this.state;
    const { results, fixtures } = liveEvents;

    // Example for rendering all fixture ids
    const fixturesArray = fixtures.map(fixture => (
      <div key={fixture.fixture_id}>{fixture.fixture_id}</div>
    ));

    return (
      <div className="livesheet">{loading ? 'loading' : fixturesArray}</div>
    );
  }
}
export default Home;

另外，你真的不需要使用 jQuery 和 react，阅读 how to make AJAX calls和所有相关的subject in the docs .