重新渲染 React 组件 X 次？答案

【问题标题】：Re-rendering React Components X times?重新渲染 React 组件 X 次？
【发布时间】：2021-09-19 10:04:01
【问题描述】：

简而言之，我的代码导入了一个 txt 文件（通过 Webpack 插件），将每一行用一个特殊字符分割成一个数组可以使用。然后“夹具”从数组中调用一个值（例如，fixture = array[i] 当i = 1 时）。然后我在子字符串函数中使用该数据来获取我需要的数据。如果fixture = array[1]，它将返回例如布伦特福德homeTeam和阿森纳awayTeam。部分数据为homeTeam和awayTeam，

所以，回到我的 React 组件，我需要重新渲染我的组件至少 10 次，但在 i 上使用不同的值（前面提到 array[i] 的变量）。

截至目前，我的主组件的return()-statement 返回一个子组件：

<Match hometeam={homeTeam} awayteam={awayTeam}/>

将homeTeam 和awayTeam 属性发送到子组件。

我需要每次使用不同的值运行<Match/> X 次。我该怎么做？希望你能帮助我...

【问题讨论】：

您的意思是要为每对主/客队显示一场比赛？夹具是这些对之一？我不太确定你的数据在这里是什么样子的。
是的，你是 100% 正确的，克里斯。我有 2 个变量：homeTeam 和 awayTeam。 “布伦特福德”和“阿森纳”。这两个都是字符串。

标签： javascript arrays reactjs typescript for-loop

【解决方案1】：

您通常通过使用map() 为每个项目呈现一个组件来做到这一点。要对两个数组的每个组合执行此操作，只需将一个 map() 嵌套在另一个数组中即可。

例如：

<div>
  {homeTeams.map(homeTeam => (
    awayTeams.map(awayTeam => (
      <Match homeTeam={homeTeam} awayTeam={awayTeam} />
    )
  )}
</div>

请注意，您通常不需要知道索引来执行此操作，您只需遍历数组中的每个项目并用它渲染一些东西。

【讨论】：

【解决方案2】：

如果您想将您的 array 映射到 <Match/> 列表

<div>
   {array.map(fixture => {
       let { homeTeam, awayTeam } = yourSubstringMethod(fixture);
       return (
           <Match homeTeam={homeTeam} awayTeam={awayTeam} />
       );
   })}
</div>

如果您想映射您的array 的一部分，请将array.map 替换为array.slice(0, 10).map

【讨论】：