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

Question

我正在学习react，我也是JS的新手，请问有人能告诉我为什么.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}
/>

希望您能找出错误。

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

props.data.map does not work in my component

reactjs

array.prototype.map

react-props