При попытке передать фиктивные данные в функциональный компонент и выполнить итерацию по массиву для отображения атрибута в диапазоне, получение ошибок типа не может получить доступ к фиктивным данным

Question

У меня есть компонент React / TypeScript, в который я пытаюсь импортировать фиктивные данные, а затем перебрать их, чтобы отобразить указанный атрибут c в элементе 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>
  );
};

Answer 1

I настроил ваши коды и поле для передачи данных в ваш компонент, как вы предложили.

Приложение. 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>;
};

Надеюсь, это поможет!