Question

我试图学习对打字稿的反应并不确定为什么会收到此错误。

我有我的CardApp：

public state = {
    cards: []
};


public render() {
    return (
        <div>
            <Form onSubmit={this.addNewCard}/>
            <CardList cards={this.state.cards}/>
        </div>
    );
}

CardList是：

const CardList = (props: ICard[]) => {
    return (
        <div>            
            { props.map((card: ICard) => <Card key={card.id} {...card} />) }   
        </div>
    )
}

与此同时，我收到一个错误类型'{卡：never []; }' 不是可分配给类型'IntrinsicAttributes＆ICard []'。输入'{卡：决不[]; }”不可分配给“ ICard []”类型。类型'{卡中没有属性'长度'：Never []; }'。

但是，如果我创建了一个ICards接口：

interface ICards {
    cards: ICard[]
}

然后使用CardList是：

const CardList = (props: ICards) => {
    return (
        <div>            
            { props.cards.map((card: ICard) => <Card key={card.id} {...card} />) }
        </div>
    )
}

这很好用，但给我的印象是<CardList cards={this.state.cards}/>传递了一个数组而不是一个具有array属性的对象，因此ICards接口不是必需的。

Answer 1

props对象不是cards数组，但是cards对象中的props键是

您可以这样写：

const CardList = (props: { cards: ICard[] }) => {
  return (
    <div>{props.map((card: ICard) => <Card key={card.id} {...card} />)}</div>
  );
};

REACT将数组传递给子组件

1 个答案: