React自定义Tooltip传参调用函数报类型不兼容错误

类型不匹配问题出在getState函数的入参定义和实际传参逻辑不一致：

• 定义getState时，第一个参数写为{payload}: TooltipProps<ValueType, NameType>，代表函数预期接收完整的TooltipProps类型对象，再从对象中解构出payload属性。
• 实际调用getState(payload, "A")时，传入的第一个参数是已经从组件props中解构出来的payload数组，类型为Payload<ValueType, NameType>[]，和函数要求的入参类型没有公共属性，因此触发类型报错。

另外代码中还存在一个隐藏运行时问题：直接在JSX中写{ payload[i] }会抛错，React不允许直接渲染普通对象，需要渲染对象内的具体字段（比如payload[i].name）。

推荐直接调整getState的入参定义，匹配实际传参类型，修改后可直接运行的完整代码如下：

const numberStates = 3;
// 第一个参数直接接收payload数组，类型取TooltipProps中payload的对应类型
function getState(payload: TooltipProps<ValueType, NameType>['payload'], state: string ){
  if(payload){
    for(let i = 0; i < numberStates; i++){
      if(payload[i].dataKey == state){
        // 移除直接渲染对象的写法，替换为具体字段，name字段可根据你的实际业务字段调整
        return <p>{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">
        {getState(payload, "A")}
        {getState(payload, "B")}
        {getState(payload, "C")}
      </div>
    )
  }
  return null;
}

如果你想保留getState原有的入参解构写法，也可以不修改函数定义，只调整调用时的传参逻辑，传入完整的props对象即可：

const numberStates = 3;
// 保持原getState入参写法不变
function getState({payload}: TooltipProps<ValueType, NameType>, state: string ){
  if(payload){
    for(let i = 0; i < numberStates; i++){
      if(payload[i].dataKey == state){
        return <p>{payload[i].name} : {payload[i].value}</p>
      }
    }
  }
  return null;
}

const CustomTooltip = (props: TooltipProps<ValueType, NameType>) => {
  const { active, payload } = props;
  if(active && payload && payload.length){
    return (
      <div className="custom-tooltip">
        {/* 传入整个props对象作为第一个参数 */}
        {getState(props, "A")}
        {getState(props, "B")}
        {getState(props, "C")}
      </div>
    )
  }
  return null;
}

第一种写法逻辑更直观，更适合新手使用。

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