我无法通过反应创建新卡

Question

Problem: I want to write a program that adds a new card when the button is pressed. I can connect and change states, but no new cards. (There is no problem that the value in the state is constant. The important thing is the formation of the new card).

There are two different components above. When the button is pressed (same state), I want a new card to be created. But I couldn't write the code.

---

card.jsx

import React from 'react'
import CardStyle from '../cardStyle/cardStyle';

class Card extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      isLoading: true,
      imageUrl: null,
      fullName: null,
      job: null
    };
  }

  clickEvent = () => {
    this.setState({
      fullName: 'Furkan',
      job: 'Software engineer'
    });
  }

  render() {
    let {isLoading, imageUrl, fullName, job} = this.state;
    return (
      <div>
        <CardStyle 
              isLoading={isLoading}
              imageUrl = {imageUrl}
              fullName = {fullName}
              job = {job}
              clicked = {this.clickEvent}
              />
        <button onClick={this.clickEvent}>ADD PERSON</button>
      </div>
    )
  }
}

export default Card;

---

cardStyle.jsx

import React, { Component } from 'react'
import classes from "./cardStyle.css";
import Wrap from "../../Wrap/Wrap";

class CardStyle extends Component {
  state = {
    image: null,
    fullName: null,
    job: null
  };

  createCard = () => {
    return(
      <div className={classes.Card}>      
        <div className={classes.Image}>{this.props.imageUrl}</div>
        <div className={classes.Title}>{this.props.fullName}</div>
        <div className={classes.Job}>{this.props.job}</div>
      </div>
    )
  };

  render() {
    return (
      <Wrap>
        {this.createCard()}
      </Wrap>
    ) 
  }
}

export default CardStyle;

Answer 1

If you want to create a new card every time you click your button, you should create cards array which maps every new card to a component. This way you will get a new card with every click instead of modifying the old card.

import React from 'react'
import CardStyle from '../cardStyle/cardStyle';

class Card extends React.Component {
  constructor(props){
    super(props);
    this.state = {
      cards: [
        {
          isLoading: true,
          imageUrl: null,
          fullName: null,
          job: null
        }
      ]
    };
  }

  clickEvent = () => {
    const cards = [
      ...this.state.cards,
      {
        fullName: 'Furkan',
        job: 'Software engineer'
      }
    ]; // This will create a new array from the old one with a new additional value
    this.setState({ cards });
  }

  render() {
    const { cards } = this.state;
    return (
      <div>
        {cards.map((card, index) => (
            <CardStyle 
              key={index}
              isLoading={card.isLoading}
              imageUrl = {card.imageUrl}
              fullName = {card.fullName}
              job = {card.job}
              />
        )}

        <button onClick={this.clickEvent}>ADD PERSON</button>
      </div>
    )
  }
}

export default Card;

Answer 2

When you're calling clickEvent method, you do not adding another value to the state , but you're overwrite existing: imgUrl and fullName .

You have to create array of cards, and display them by map method inside return .

If first card is blank for now, you can start from empty array in state cards: [] , and display CardStyle component only if this.state.cards.length > 0 .