React .map не является функцией, но не может передать массив

Question

У меня есть приложение root и отложенный компонент.

Приложение root:

import Component from './app/components/component/component.lazy';

class App extends React.Component{

    stuff: stuffType[] = [1, 2 , 3];

    render() {
        return (
           <Component stuff={this.stuff}/>
        );
    }
}


export default App;

Ленивый компонент:

import React, { lazy, Suspense } from 'react';
import {stuffType} from '../../dto/types';

const Lazycomponent = lazy(() => import('./component'));

const component = (props: {tanks: stuffType[]} & { children?: React.ReactNode; }) => (
  <Suspense fallback={null}>
    <Lazycomponent {...props} />
  </Suspense>
);

export default component;

Компонент:

const component: React.FC<any> = (stuff: stuffType[]) => {
    return(
       {stuff.map((stuff: stuffType, index: number) => {
           return (
              <div >

              </div>
           )
       })}
    )
}

в приведенном выше коде нет ошибок после проверки типов в реальном времени, а также в консоли запуска.

, однако во время выполнения в браузере я получаю сообщение об ошибке

TypeError: stuff.map не является функцией

ОК. Штраф:

const component: React.FC<stuffType[]> = (stuff: stuffType[]) => {

Нет, теперь проверка живого типа завершается неудачей в ленивом компоненте:

TS2740: Тип '{stuff: stuffType []; дети ?: ReactNode; } 'отсутствуют следующие свойства из типа' stuffType [] ': length, pop, pu sh, concat и еще 28.

Как это можно сказать, когда я даю это массив?

Answer 1

Реквизит - это объект, а не массив.

interface Props {
  stuff: stuffType[]
}

const component: React.FC<Props> = props => {
    return(
       {props.stuff.map((stuff: stuffType, index: number) => {
           return (
              <div >

              </div>
           )
       })}
    )
}