试图将模拟数据传递到功能组件中并遍历数组以显示跨度的属性，导致类型错误无法访问模拟数据

我有一个React / TypeScript组件，我试图将模拟数据导入其中，然后对其进行迭代以在span元素中显示特定属性。

我遇到的问题是，我似乎无法将模拟数据传递到我的组件中以对其进行迭代，与此同时，我还遇到了奇怪的类型错误，似乎表明我要么使用我的道具的数据类型定义或数据本身，但不要同时使用两者。

我创建了一个CodeSandbox来突出显示这些问题，并在下面看到错误的地方添加了我的主要组件：

Current Component

import React from 'react';
import contacts from '../../mock-data/contacts-mock-data';
import { Contacts, ContactGroup } from '../../services/contacts-client';

type Props = {
  contacts: Contacts[];
  contactGroups: ContactGroup[];
};

export const ContactGroupsSection = (props: Props) => {
  const { contacts, contactGroups } = props

  let groups = () => {
    for (let i = 0; i < contacts.contactGroups.length; i++) {
      return <span>{contacts.contactGroups.contactGroup}</span>;
    }
  };

  return (
    <div>{groups}</div>
  );
};
回答如下：

I tweaked your codesandbox按照您的建议将数据传递到您的组件中。

App.js

import React from "react";
import "./styles.css";
import { ContactGroupsSection } from "./contact-groups";
import contacts from "./contacts-mock-data";

export default function App() {
  return (
    <div className="App">
      <h1>Hello CodeSandbox</h1>
      <h2>Start editing to see some magic happen!</h2>
      <ContactGroupsSection contacts={contacts} />
    </div>
  );
}

contact-groups.tsx

import React from "react";
import { Contacts } from "./contact-types";

type Props = {
  contacts: Contacts;
};

export const ContactGroupsSection = ({ contacts }) => {
  const groups = contacts.contactGroups.map(contactGroup => (
    <span>{contactGroup.contactGroup}</span>
  ));

  return <div>{groups}</div>;
};

希望有帮助！