React .map 不是函数但不能传递数组

Question

我有我的应用根目录和一个延迟加载的组件。

应用根目录：

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

以上代码在实时类型检查后没有错误，none 在运行控制台中也没有错误。

然而在运行时间在浏览器中我收到错误

TypeError: stuff.map is not a function

好的。很好：

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

不，现在惰性组件中的实时类型检查失败了：

TS2740: Type '{ stuff: stuffType[]; children?: ReactNode; }' is missing the following properties from type 'stuffType[]': length, pop, push, concat, and 28 more.

我给它的是一个数组，它怎么会这么说呢？

Answer 1

Props 是对象而不是数组。

interface Props {
  stuff: stuffType[]
}

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

              </div>
           )
       })}
    )
}

React .map 不是函数但不能传递数组

React .map is not a function but cannot pass array

typescript

reactjs

react-component