TypeScript中如何在App函数内获取遍历计算的temp变量值

你原有写法存在几个逻辑和作用域问题，导致拿不到正确的temp值：

• temp声明时没有设置初始值，初始为undefined，和数字做大小比较时永远返回false，计算逻辑从一开始就失效
• forEach的回调返回值没有任何作用，forEach本身不会接收回调的return值做输出
• 计算逻辑写在App组件外部，既存在执行时序问题，后续如果companies数据动态更新，也不会触发重新计算，React无法感知外部变量的变化
• 列表渲染时没有给列表项加key属性，会触发React的渲染性能警告

推荐实现方案 #

方案1：简洁写法（适合中小数据量） #

直接在组件内部计算最大资本值，逻辑直观易维护：

function App() {
  // 组件每次渲染时实时计算当前列表的最大资本值
  const maxCapital = Math.max(
    ...companies.map(comp => parseFloat(comp.capital.replace('$', '')))
  );

  return (
    <FormContainer>
      <List component="nav">
        <Typography sx={{marginTop: "50px"}} variant='h3'>资本额最高企业</Typography>
        {
          companies
            .filter(comp => parseFloat(comp.capital.replace('$', '')) === maxCapital)
            .map(comp => (
              <Compagnie
                key={comp.id}
                id={comp.id}
                company={comp.company}
                logo={comp.logo}
                phone={comp.phone}
                city={comp.city}
                capital={comp.capital}
              />
            ))
        }
      </List>
    </FormContainer>
  );
}

这个写法会遍历两次列表：第一次取所有资本值算最大值，第二次过滤出匹配的公司，列表长度在万级以下完全不会有性能问题。

方案2：高性能写法（适合大数据量） #

用reduce一次遍历就完成最高资本公司的筛选，不需要重复遍历列表，同时支持多家公司资本并列最高的场景：

function App() {
  const topCompanies = companies.reduce((acc, cur) => {
    const curCapital = parseFloat(cur.capital.replace('$', ''));
    const currentMax = acc[0] ? parseFloat(acc[0].capital.replace('$', '')) : -Infinity;

    if (curCapital > currentMax) {
      // 发现更高资本的公司，清空之前的结果，存入当前公司
      return [cur];
    }
    if (curCapital === currentMax) {
      // 资本和当前最高值持平，追加到结果列表
      acc.push(cur);
    }
    return acc;
  }, [] as typeof companies);

  return (
    <FormContainer>
      <List component="nav">
        <Typography sx={{marginTop: "50px"}} variant='h3'>资本额最高企业</Typography>
        {
          topCompanies.map(comp => (
            <Compagnie
              key={comp.id}
              id={comp.id}
              company={comp.company}
              logo={comp.logo}
              phone={comp.phone}
              city={comp.city}
              capital={comp.capital}
            />
          ))
        }
      </List>
    </FormContainer>
  );
}

内容的提问来源于stack exchange，提问作者COPEGUEST