如何在if语句中调用组件前执行函数？语法报错求助

错误原因 #

你的代码存在两个核心问题：

1. 三元运算符语法错误：condition ? expr1, expr2 : expr3 不符合语法规范，三元表达式的分支必须是单个有效表达式，逗号分隔会导致解析失败。
2. 未正确捕获函数返回值：getAnswerCount的返回值没有赋值给cevapSayisi，导致渲染时无法获取该值。

同步函数场景解决方案 #

如果getAnswerCount是同步函数，直接在map回调中先执行函数获取值，再进行条件渲染：

<AccordionDetails> 
  {answers.map((a) => {
    // 先调用函数拿到计数
    const cevapSayisi = getAnswerCount(a.SoruID, a.Id);
    // 条件判断后返回渲染内容
    return Number(a.SoruID) === Number(soru.SoruID) ? (
      <Typography key={a.Id}>
        {a.TextCevap} kullanicilar :{cevapSayisi}
      </Typography> 
    ) : null;
  })}
</AccordionDetails>

关键优化点：

• 将map的箭头函数改为带函数体的形式，允许先执行函数调用并存储结果。
• 给Typography添加key属性，符合React列表渲染的要求，避免控制台警告。
• 用括号包裹JSX分支，保证三元表达式语法正确。

异步函数场景解决方案 #

如果getAnswerCount是异步函数（比如发起API请求），不能直接在渲染阶段调用，否则会引发无限重渲染，需要用状态管理结果：

import { useState, useEffect } from 'react';

// 组件内部状态存储计数
const [cevapSayilar, setCevapSayilar] = useState({});

// 当依赖项变化时预加载所有需要的计数
useEffect(() => {
  const fetchCevapCounts = async () => {
    const tempCounts = {};
    for (const a of answers) {
      if (Number(a.SoruID) === Number(soru.SoruID)) {
        const count = await getAnswerCount(a.SoruID, a.Id);
        tempCounts[a.Id] = count;
      }
    }
    setCevapSayilar(tempCounts);
  };
  fetchCevapCounts();
}, [answers, soru]);

// 渲染部分
<AccordionDetails> 
  {answers.map((a) => {
    if (Number(a.SoruID) !== Number(soru.SoruID)) return null;
    return (
      <Typography key={a.Id}>
        {a.TextCevap} kullanicilar :{cevapSayilar[a.Id] || 'Yükleniyor...'}
      </Typography> 
    );
  })}
</AccordionDetails>

关键说明：

• 使用useEffect监听answers和soru的变化，仅在依赖更新时发起异步请求。
• 将所有计数存储在状态中，渲染时直接读取状态值，避免重复调用异步函数。
• 添加加载状态提示，提升用户体验。

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