Javascript 试图将模拟数据传递到功能组件中，并在数组上迭代以在span中显示属性，获取类型错误可能'；t访问模拟数据

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

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

我创建了一个CodeSandbox来突出这些问题，并包含了我的主要组件，其中我看到了以下错误：

当前组件

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>
  );
};

从“React”导入React；
从“../../mock data/contacts mock data”导入联系人；
从“../../services/Contacts client”导入{Contacts，ContactGroup}；
类型道具={
联系人：联系人[]；
联系人组：联系人组[]；
};
导出常量ContactGroupsSection=（props:props）=>{
const{contacts，contactGroups}=props
让组=（）=>{
对于（设i=0；i

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

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>
  );
}

从“React”导入React；
导入“/styles.css”；
从“/contact groups”导入{ContactGroupsSection}；
从“/contacts mock data”导入联系人；
导出默认函数App（）{
返回(
你好，代码沙盒
开始编辑，看看神奇的发生！
);
}

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>;
};

从“React”导入React；
从“/contact types”导入{Contacts}”；
类型道具={
联系人：联系人；
};
导出常量ContactGroupsSection=（{contacts}）=>{
const groups=contacts.contactGroups.map（contactGroup=>(
{contactGroup.contactGroup}
));
返回{groups}；
};

---

希望有帮助

很好！我现在看到的唯一问题是，在我的原始应用程序中，联系人和contactGroup的这一部分出现了类型错误

export-const-contactGroups-section=（{contacts}）=>{const-groups=contacts.contactGroups.map（contactGroup=>（{contactGroup.contactGroup}））

说他们

具有任何类型的隐式类型

知道如何通过使用类型定义来解决这个问题吗？如果我正确理解了这个问题，您只需要指定要传递给

联系人组部分的对象的类型

。将属性更改为类似

{contacts}：Props

。这样，您就可以清楚地知道您希望使用哪种类型的Props对象。希望这对您有所帮助！