Question

如何将sport_id的{{1}}表格发送到getSport以显示每个体育赛事？

我可以将getEvents函数放到其他组件中，在该组件中调用并使用它吗？

事件json：

getSport

体育json：

[
  {
    "id": "912653",
    "time": "1536471082",
    "time_status": "1",
    "league": {
      "id": "900",
      "name": "Hong Kong 2nd Division",
      "cc": "hk"
    },
    "home": {
      "id": "13767",
      "name": "Yau Tsim Mong",
      "image_id": "193606",
      "cc": "hk"
    },
    "away": {
      "id": "63770",
      "name": "Tuen Mun SA",
      "image_id": "56045",
      "cc": "hk"
    },
    "timer": {
      "tm": 74,
      "ts": 25,
      "tt": "1",
      "ta": 0
    },
    "scores": {}
  }
]

这是我的代码：

[
  {
    "id": 8,
    "name": "Rugby Union",
    "is_active": null,
    "slug": "rugby-union"
  }
]

Answer 1

只需对其进行破坏-将运动加载到一个组件中，然后将一些<EventsLoadingComponent />传递的运动ID用作道具...

提示：在“主返回”之前在渲染器中使用if(isLoading) return <p>Loading...</p>-无需在返回JSX中使用三元运算符。

更新：

render() {
  const { sports, isLoading } = this.state;
  if(isLoading) return <p>Loading...</p>
  return (
    <React.Fragment>
      {sports.map(sport => <EventsLoadingComponent sport={sport}/>}
    </React.Fragment>
  );
}

将getEvents移到<EventsLoadingComponent/>中-您将沉迷于与this.props.sport.id相关的事件并进行渲染。这样，它们每个都可以分别更新。

请记住在最顶部的html元素中使用key。

更新＃2：

能否请您将代码与我的代码进行比较？

您的代码-线性，过程化，“扁平化模板驱动”，强制异步同步，多组件合一...而html是树形结构（扁平化视图）。

React thinking （通常，不仅限于我的代码）-更多面向对象，建立与数据和视图结构更紧密相关的对象树，让他们自己承担责任（数据处理，视图）。易于阅读，扩展（将更多细节分解为组件-甚至是一层），适合装饰，易于管理和重复使用。

结构中的对象通常只渲染传递的子代（或不提供任何子代），仅提供功能。可用的复杂度更高，与html中的通信相比，这种结构内的通信要容易得多（并且依赖性更低）。

Answer 2

类似这样的东西：

getEvents({ id }) {
    axios
      .get(`/api/v1/events?sport_id=${id}`)
      ...
  }

  componentDidMount() {
    this.getSports()
      .then(() => {
        return Promise
          .all(this.state.sports.map(this.getEvents))
      });
    ...
  }

注意：

您需要优化保存数据的方式，因为您需要知道哪些事件与哪些 sport 有关。

如何将参数传递给reactjs中的函数？

2 个答案: