如何突破 React 映射以显示 object 有两个值，一个是数组，另一个是字符串或数字（结果）

Question

我正在创建一个将返回所有足球现场赛事的现场比分网站。 我正在使用 jquery 发送请求，然后得到一个具有修复程序的 object 响应 - 这包含所有实时事件和最终结果的数组 - 这计算事件的数量（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

您可以将您的数据放在 state 中，并在您的应用程序中显示它们（在渲染中），如下所示：

    <div>{this.state.mydata.map
    (m=><div>m.teamname</div>)}
    </div>

更新好吧，如果你也想提取数组，你应该在第一个 map 中写另一个 map，如下所示：

<div>
{this.state.mydata.map(mydata=>
<div>
{mydata.map(myarray=>
 <div>{myarray.teamname}</div>
 )mydata.id
 </div>)}
  </div>

它是这样的，你可能需要检查语法，如果你使用两个嵌套的 map 你也可以在你的数据中提取你的数组我希望你明白这个想法并为你工作

Answer 2

请参考什么是 JSX 。

您需要将 liveEvents 中的数据liveEvents到ReactElement / ReactElement s 数组：

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 一起使用，请阅读如何进行 AJAX 调用以及文档中的所有相关主题。