React中映射函数内点赞条件判断失效问题排查

Hey there! Let's break down why your like functionality stops working when you wrap it in a map function, and fix it step by step.

What's Going Wrong? #

1. Closure Trap with Stale State
   When you run someFunction inside a useEffect with an empty dependency array, it only executes once when the component mounts. The thumbsUpClicked function bound to the button in your map is capturing the initial state (where thumbsUp is false). Even after you update the state later, this function still references that old state value—so every click thinks you haven't liked yet.

2. Storing JSX in State is a Bad Idea
   You're saving the rendered JSX from map directly into your state (mappedThumb). React state should hold data, not UI elements. Storing JSX here means it won't re-render when your state changes, which also contributes to the stale behavior.

3. Direct DOM Manipulation Breaks React's Flow
   Using document.querySelector to update the like count skips React's state management. This makes your UI out of sync with React's internal state, and can lead to unexpected behavior when components re-render.

How to Fix It #

Let's rewrite this to follow React best practices:

1. Move the map Render to the Return Statement
   Instead of storing JSX in state, render the mapped content directly in your component's return. This ensures it always uses the latest state values.

2. Store Like Count in State
   Add a likeCount property to your state instead of hardcoding "50" and manipulating the DOM. This keeps your UI in sync with React's state.

3. Fix the Closure Issue
   By rendering the map directly in the return, the thumbsUpClicked function will always reference the latest state. Using a functional update for state also guarantees we're working with the most recent state values.

Fixed Code #

import React, { useState, useEffect } from 'react'

const VideoPage = () => {
  // Add likeCount to state and initialize it to 50
  const [state, setState] = useState({
    loading: true,
    error: false,
    thumbsUp: false,
    thumbsDown: false,
    likeCount: 50
  })

  useEffect(() => {
    someFunction()
  }, [])

  const someFunction = () => {
    // Handle data fetching/setup here—don't store JSX in state
    setState(prevState => ({...prevState, loading: false}))
  }

  const thumbsUpClicked = () => {
    // Use functional update to access the latest state
    setState(prevState => {
      if (!prevState.thumbsUp) {
        return {
          ...prevState,
          thumbsUp: true,
          likeCount: prevState.likeCount + 1
        }
      }
      return prevState
    })
  }

  return (
    <div>
      {/* Render mapped content directly in the return */}
      {[0].map((item, index) => (
        <div 
          key={index} // Always add a unique key for mapped elements
          className={`videoPage-video-options-thumbsUp`} 
          onMouseDown={thumbsUpClicked}
        >
          <svg width="20" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
            <path d="M198 448h172c15.7 0 28.6-9.6 34.2-23.4l57.1-135.4c1.7-4.4 2.6-9 2.6-14v-38.6c0-21.1-17-44.6-37.8-44.6H306.9l18-81.5.6-6c0-7.9-3.2-15.1-8.3-20.3L297 64 171 191.3c-6.8 6.9-11 16.5-11 27.1v192c0 21.1 17.2 37.6 38 37.6zM48 224h64v224H48z"/>
          </svg>
          &nbsp;
          {/* Use state value for the like count instead of hardcoding */}
          <span className={`videoPage-video-options-thumbsUp-text`}>
            {state.likeCount}
          </span>
        </div>
      ))}
    </div>
  )
}

export default VideoPage

Key Improvements #

• No More Stale State: The functional update (prevState) ensures we always work with the latest state values, avoiding closure issues.
• State-Driven UI: The like count is controlled by React state, so the UI updates automatically without direct DOM manipulation.
• Proper Mapping: The map runs on every render, so the button always uses the current state and click handler. We also added a required key prop for mapped elements.

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