初识React Hooks

import React, { useState } from 'react'
import { Card, Button } from 'antd'

export default function Demo(){

	const [ cardList , setCardList ] = useState([
		{
			id: 1,
			setup: 'Did you hear about the two silk worms in a race?',
			punchline: 'It ended in a tie',
		},
		{
			id: 2,
			setup: 'What happens to a frog\'s car when it breaks down?',
			punchline: 'It gets toad away',
		}
	])

	//setCardList直接覆盖之前的state，而不是合并之前state对象
	const addNewCard = () =>{
		let prevCardList = [...cardList]
		setCardList([
			...prevCardList ,
			{
				id: prevCardList.length + 1,
				setup: 'Lorem ipsum dolor sit amet, consectetur adipiscing elit,',
				punchline: 'sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.',
			}			
		])
	}


	return(
		<div>
			{
				cardList.map(card =>{
					return(
						<Card key={card.id}>
							<div>Q: {card.setup}</div>
							<div>
								<strong>A: {card.punchline}</strong>
							</div>
						</Card>
					)
				})
			}
			<div>
				<Button onClick={ addNewCard }> 添加卡片 </Button>
			</div>
		</div>
	)
}