Reactjs 从api获取对象数组（嵌套），循环3次，意见，反应

我从父对象数组中的api获取数据。获取数据 我需要在child中渲染，我必须像示例一样映射3次 在下面显示

我的问题是：

1） 是否有更好的方法（或更好的实践）在这样的部门中循环

2） 如何在第三个循环中仅限制10个结果

3） 如何将循环中需要的值存储到可以重用的状态 他们是孩子吗

const matchInfo=this.state.matchData.map（（数据，i）=>
数据。锦标赛。地图（（巡回赛，j）=>
tour.matches.map（（matc，k）=>
//例如，我在循环中查找的数据
{tour.name}
{data.name}
{matc.something.home.name}
{matc.something.away.name}
....//等等
)
)

任何帮助都将不胜感激

1.）是否有更好的方法（或更好的实践）在该部门循环

不，这个看起来不错

2.）如何在第三个循环中仅限制10个结果

3.）如何将循环中需要的值存储到可以重用的状态 他们是孩子吗

你们能详细说明一下，你们想在这个州储存什么，你们想在哪个孩子身上重复使用它们吗

编辑：

3.）如何将循环中需要的值存储到可以重用的状态 他们是孩子吗

如果要创建子组件并使用其中的数据，只需创建一个新组件并将数据作为道具传递：

const Card = ({ data, tour, match }) => (
  <div>
    <div>{tour.name}</div>
    <div>{data.name}</div>
    <div>{match.something.home.name}</div>
    <div>{match.something.away.name}</div>
    // and so on...
  </div>
);

const Card=（{data，tour，match}）=>(
{tour.name}
{data.name}
{match.something.home.name}
{match.something.away.name}
//等等。。。
);

然后在父组件中：

const matchInfo = this.state.matchData.map((data, i) =>
                    data.tournaments.map((tour, j) =>
                      tour.matches.slice(0, 10).map((match, k) =>
                        <Card data={data} tour={tour} match={match} />
                      )));

const matchInfo=this.state.matchData.map（（数据，i）=>
数据。锦标赛。地图（（巡回赛，j）=>
tour.matches.slice（0,10）.map（（match，k）=>
)));

您能否提供您得到的确切响应数据类型？“数据”：[{“realcategories”：[{“Tournames”：[{“matches”：[{{u dt:{}，“团队”：{“家”：{}“走”：{}在父级中，我从API获取数据，并将数据结果限制为10（来自循环的数据-我想用循环值更新状态），在子对象中，我想渲染通过props.state从循环获得的数据-来自父对象）以卡片的形式。每个都代表一张卡片吗？您希望子组件替换代码片段中的div吗？是的，这正是我需要的。非常感谢您花时间解决这个问题，一切都很好，只是切片函数不起作用，它正在显示所有卡片，可能是因为它映射了很多次，虽然我希望你编辑你的问题，而不是我的答案，并将你的代码张贴在那里，以保持可读性^^无论如何，问题是，你的类别中有多个项目（matchData）阵列和每个类别的多个巡演。假设您有5个类别，每个类别7个巡演，您最多可以获得5*7*10=350个项目，而不是10个。现在的问题显然是您要显示哪些数据。您只想显示10个随机比赛吗？您想显示每个比赛的一场比赛吗？您想通过以下方式显示接下来的10场比赛吗约会？

const Card = ({ data, tour, match }) => (
  <div>
    <div>{tour.name}</div>
    <div>{data.name}</div>
    <div>{match.something.home.name}</div>
    <div>{match.something.away.name}</div>
    // and so on...
  </div>
);

const matchInfo = this.state.matchData.map((data, i) =>
                    data.tournaments.map((tour, j) =>
                      tour.matches.slice(0, 10).map((match, k) =>
                        <Card data={data} tour={tour} match={match} />
                      )));