React中done函数无响应问题排查：多选后无法展示正确图片

Let's walk through why your done function isn't working and how to fix it step by step:

The Core Issue #

Right now, your done function tries to return JSX directly when the button is clicked—but React event handlers don't work this way. They can't render content on their own; instead, you need to update your component's state, which will trigger a re-render and let you display the correct items in the render method.

Step 1: Update Initial State #

First, add two new state variables to track:

• showCorrectItems: Whether to display the correct items after clicking done
• selectedItems: (Best practice) Track which items are selected instead of manipulating the DOM directly

Update your constructor:

constructor(props){
  super(props);
  this.selected = this.selected.bind(this);
  this.done=this.done.bind(this);
  this.state = {
    isLoaded: false,
    items: [],
    showCorrectItems: false,
    selectedItems: new Set() // To track selected item images
  }
}

Step 2: Fix the done Function #

Instead of returning JSX, have this function update the showCorrectItems state to true:

done(){
  this.setState({ showCorrectItems: true });
}

Step 3: Fix the selected Function #

Instead of toggling a class directly on the DOM element, update the selectedItems state to track selections:

selected(itemImg){
  this.setState(prevState => {
    const newSelected = new Set(prevState.selectedItems);
    if(newSelected.has(itemImg)){
      newSelected.delete(itemImg);
    } else {
      newSelected.add(itemImg);
    }
    return { selectedItems: newSelected };
  });
}

Step 4: Adjust the Render Method #

• Update the image click handler to pass the item's image path
• Conditionally add the selected class based on selectedItems
• Add a section to display all correct items when showCorrectItems is true

Here's the updated render method:

render(){
  const { isLoaded, items, showCorrectItems, selectedItems } = this.state;
  
  if(!isLoaded){
    return <div>Loading...</div>; // Add loading state for better UX
  }
  
  return(
    <div>
      <div align="center"><div className="Helloo"><h1>Choose Kitchen Tools</h1></div></div>
      <div className="Line">
        {items.map((item) =>
          <div className="divas" key={item.img}>
            <img 
              src={item.img} 
              onClick={() => this.selected(item.img)}
              className={selectedItems.has(item.img) ? 'selected' : ''}
            />
          </div>
        )}
      </div>
      <div align="center">
        <button className="Baigta" onClick={this.done}>
          <img src="/images/Check.jpg"/>
        </button>
      </div>
      
      {/* Display correct items when done is clicked */}
      {showCorrectItems && (
        <div className="correct-items" align="center">
          <h2>Correct Kitchen Tools:</h2>
          {items.filter(item => item.isCorrect).map((correctItem) => (
            <div className="divas" key={correctItem.img}>
              <img src={correctItem.img}/>
              {/* Add answer text here if you have it, e.g.: <p>{correctItem.answerText}</p> */}
            </div>
          ))}
        </div>
      )}
    </div>
  )
}

Optional Adjustment #

If you want to show only the selected items that are correct (instead of all correct items), modify the filter to:

items.filter(item => item.isCorrect && selectedItems.has(item.img))

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