React/TypeScript中const组件内调用函数渲染异常的解决方法

两个问题导致渲染异常：

1. JSX语法规则要求：所有需要动态执行的JavaScript表达式（包括函数调用、变量读取、逻辑运算），必须包裹在{}中才能被React识别执行。你直接在div标签内部裸写getState("A")这类内容，React会把它当成普通静态文本直接输出，不会执行函数。
2. 函数参数传递错误：你定义的getState第一个参数要求接收一个带payload属性的props对象，实际调用时只传了state字符串，就算加了花括号调用，也会因为参数结构不匹配拿不到payload数据，返回null或者报错。另外原代码中直接渲染payload[i]整个对象也不符合React规则，会触发“对象不能作为React子元素”的报错，需要取对象下的具体可渲染字段（比如name字段）。

直接调整参数逻辑+补全JSX表达式包裹即可：

const numberStates = 3;
// 调整参数定义，直接接收payload数组和目标state，传参更简洁
function getState(payload: TooltipProps<ValueType, NameType>['payload'], state: string ){
  if(payload){
    for(let i = 0; i < numberStates; i++){
      if(payload[i].dataKey == state){
        // 补列表key属性，不要直接渲染整个payload[i]对象，取name字段展示
        return <p key={state}>{ payload[i].name } : { payload[i].value }</p>
      }
    }
  }
  return null;
}

const CustomTooltip = ({ active, payload, label}: TooltipProps<ValueType, NameType>) => {
  if(active && payload && payload.length){
    return (
      <div className="custom-tooltip">
        {/* 用花括号包裹函数调用，传入正确的payload参数 */}
        {getState(payload, "A")}
        {getState(payload, "B")}
        {getState(payload, "C")}
      </div>
    );
  }
  return null;
}

如果不想调整getState的参数定义，保持原来第一个参数解构props的写法，调用时传参格式要对应写成{getState({payload}, "A")}，但这种写法会传递冗余参数，直接传实际用到的payload数组逻辑更清晰。

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