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

Question

我有一个 React/TypeScript 组件，我正在尝试将模拟数据导入其中，然后对其进行迭代以在 span 元素中显示特定属性。我遇到的问题是我似乎无法将模拟数据传递到我的组件中以对其进行迭代，同时我也收到奇怪的类型错误，这似乎表明我正在使用类型定义我的数据或我的道具的数据本身，但从不两者兼而有之。我创建了一个 CodeSandbox 来突出显示这些问题，并在我看到以下错误的地方包含了我的主要组件：Current Componentimport 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>  );};

Answer 1

我按照您的建议调整了您的代码框以将数据传递到您的组件中。

应用程序.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>

  );

}

联系人-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>;

};

希望有帮助！