如何使用 typescript 无法识别的映射值从 object 访问密钥？

Question

我有一个如下所示的数据结构：

     data: {
        returned: {
          items: {
            payment_returned: {
              count: randFloat(),
              percentage: randFloat()
            }
          },
          meta: {
            count: 1000,
            percentage: 1000
          }
        },
        rejected: {
          items: {
            external_validation_failed: {
              count: randFloat(),
              percentage: randFloat()
            },
            missing_capability: {
              count: randFloat(),
              percentage: randFloat()
            },
            payment_request_cancelled: {
              count: randFloat(),
              percentage: randFloat()
            },
            validation_schema_failed: {
              count: randFloat(),
              percentage: randFloat()
            },
            conversion_to_v1_failed: {
              count: randFloat(),
              percentage: randFloat()
            }
          },
          meta: {
            count: 1000,
            percentage: 1000
          }
        },
.......................

对于多个“数据”object 键重复此操作。 我试图从数据中获取密钥（例如返回和拒绝的类别）以及来自元数据的计数键，它位于“数据”内的同一 object 键（类别）中。 我设法获得了作为“数据”键的类别，但我正在努力寻找一种动态方法来从元中获取相同数据键（类别）的计数键。

我做了如下：

const WidgetCategories = () => {
  const { data, isLoading, isSuccess } = useGetStatisticsDataQuery();
  const [categories, setCategories] = useState<PayoutState[]>();
  useEffect(() => {
    if (data) {
      const categoriesArray = Object.keys(data.data);
      setCategories(categoriesArray as unknown as PayoutState[]);
    }
  }, [isSuccess, data]);
  return (
    <>
      <div className="w-68 cursor-pointer rounded-lg bg-white p-4 shadow-plain-lg">
        <p className="mb-8 text-sm font-bold">Payouts states</p>
        {isSuccess && categories
          ? categories.map((category: PayoutState) => {
              console.log(data.category);
              return (
                <Link
                  className="align-center mb-2 ml-4 flex cursor-pointer text-sm font-medium"
                  to="/payouts/:category"
                  key={category}
                >
                  <PayoutBadge type={category} count={9} />
                </Link>
              );
            })
          : null}

现在的问题是，如果我 map 类别并且我想使用 data.category TypeScript 抱怨属性“类别”在“统计响应”类型上不存在。 但最后它只是我的类型中描述的类别名称。 类别是映射 StatisticResponse model 内的类别的结果。 如何以动态方式处理/解决此问题？ 我还需要确保当我将类别传递给映射组件时，计数与正确的类别相关联。

export interface StatisticsResponse {
  data: {
    returned: ItemsData;
    rejected: ItemsData;
    completed: ItemsData;
    action_required: ItemsData;
    pending: ItemsData;
    processing: ItemsData;
    received: ItemsData;
  };
}

Answer 1

• 您的categoriesArray只是一个字符串数组
• 'StatisticsResponse' 类型上不存在category ，但console.log(data.data[category])将起作用。

您可以按照以下方式更好地处理它

useEffect(() => {
  const categoriesArray = Objects.keys(data.data).map(key => {
    return {
      key,
      data: data.data[key]
    }
  })
  setCategories(categoriesArray);
})

return (
  ...
  categories.map(category => {
    return (
      <Link to={{
        pathname: `/payouts/${category.key}`,
        state: { category: category.data }
      }}>
      </Link>
    )
  })
)