React技术问询：点击按钮重复渲染新KanBanCard组件无响应

Hey there! I see the problem you're running into—your newCard function logs to the console just fine, but the KanBanCard component never shows up. That's because React doesn't automatically render JSX returned from an event handler; UI updates in React are always driven by state changes. Let's fix this step by step.

Why Your Current Code Isn't Working #

Right now, your newCard function returns a <KanBanCard /> wrapped in a div, but React has no way to inject this into the component's rendered output. Event handlers are for triggering actions, not returning JSX to render. You need to use state to track how many cards should be displayed, then render them based on that state.

Step-by-Step Solution #

Assuming you're using a class component (since you're using this.newCard), here's how to adjust your code:

1. Initialize state to track your cards
   Add a state property to hold an array of unique identifiers for your cards (this helps React keep track of each card individually):

   constructor(props) {
     super(props);
     this.state = {
       cards: [] // Start with an empty array (no cards)
     };
     // Bind the function to the component instance so `this` works correctly
     this.newCard = this.newCard.bind(this);
   }
   

2. Update newCard to modify state instead of returning JSX
   Instead of trying to return a component, push a new unique entry into the cards array (we’ll use Date.now() for a quick unique ID):

   newCard() {
     console.log("New card being displayed");
     // Use the functional form of setState to ensure we have the latest state
     this.setState(prevState => ({
       cards: [...prevState.cards, Date.now()]
     }));
   }
   

3. Render cards based on the state array
   In your render method, map over the cards array to render a KanBanCard for each entry:

   render() {
     return (
       <main>
         <button onClick={this.newCard} className="card-add">+</button>
         {/* Container for all Kanban cards */}
         <div className="kanban-card-container">
           {this.state.cards.map(cardId => (
             <KanBanCard key={cardId} />
           ))}
         </div>
       </main>
     );
   }
   

Key Notes #

• Unique key Prop: Always include a key when rendering lists in React—it helps React efficiently update the DOM when the list changes. We used Date.now() here, but in a production app you might use a UUID or backend-generated ID.
• Functional setState: When updating state that depends on the previous state (like adding to an array), use the functional form to avoid race conditions with stale state.

If you're using a functional component instead, the logic is nearly identical but uses the useState hook:

import { useState } from 'react';

function KanbanBoard() {
  const [cards, setCards] = useState([]);

  const newCard = () => {
    console.log("New card being displayed");
    setCards(prevCards => [...prevCards, Date.now()]);
  };

  return (
    <main>
      <button onClick={newCard} className="card-add">+</button>
      <div className="kanban-card-container">
        {cards.map(cardId => (
          <KanBanCard key={cardId} />
        ))}
      </div>
    </main>
  );
}

This approach ensures every button click updates the state, which triggers a re-render and adds a new KanBanCard to your board.

内容的提问来源于stack exchange，提问作者shanicunn