props.data.map在我的组件中不起作用

Question

我正在学习反应，我也是JS的新手，有人可以告诉我为什么.map功能在一个组件中工作，但在另一个组件中不起作用？

Map在此组件中运行良好

import React from 'react';
import Card from './card';
import '../memoryGameStyle/cardList.css';

const CardList =(props)=>{
    const card=props.cards.map((c,i)=>(
        <Card
            key={i}
            card={c}
            cards={props}
        />
    ))
    return(
        <div className='card-list'>
            {card}
        </div>
    )
}

export default CardList;

但它在此组件中不起作用

import React from 'react';
import '../memoryGameStyle/card.css';

class Card extends React.Component{
    constructor(props){
        super(props);
        const {hidden,show,id,r,g,b}=this.props.card
        this.state={...}
        const style='';
    }

    componentWillReceiveProps(){...}

    onClick=()=>{
        const {id}=this.props.card
        this.setState({hidden:false})
        this.setState({show:true})
        const cards=this.props.cards.map((card,i)=>{
            console.log(card)
        })
    }
render(){...}

我每次都有这个错误

Answer 1

您向Card组件发送了错误的数据。

更改

<Card
  key={i}
  card={c}
  cards={props}
/>

到

<Card
  key={i}
  card={c}
  cards={props.cards}
/>

希望，你弄明白了这个错误。