ReactJS中useEffect钩子内递增索引计数器的问题

Hey there! Let's break down what's going wrong with your lastIndex state and how to fix it.

The Root of the Problem #

Your current approach has two key issues:

1. State updates are asynchronous & batched: When you call setlastIndex in a loop, React doesn't update the state immediately. So when you assign item.aptId = lastIndex, you're always using the initial value of lastIndex (0) from the start of the useEffect run.
2. Closure behavior: The lastIndex variable inside your map function is captured from the initial render's closure—it never updates during the loop, even though you're calling setlastIndex.

Even though you're using the functional update form (setlastIndex(lastIndex => lastIndex+1)), this only ensures each state update uses the previous state value. However, it doesn't change the fact that item.aptId is being set to the original lastIndex value (0) every time.

Fixes to Try #

Here are two straightforward solutions depending on your needs:

Solution 1: Use the Map Index (Simplest)

If you just need unique, sequential aptId values starting from 0, you can use the second parameter of the map function (which is the item's index in the array):

function App() { 
  const [myAppointment, setmyAppointment] = useState([]) 
  const [lastIndex, setlastIndex] = useState(0) 
  const [orderBy, setorderBy] = useState('petName') 
  const [orderDir, setorderDir] = useState('asc') 
  const [queryText, setqueryText] = useState('') 

  useEffect(() => { 
    fetch('./data.json') 
      .then(response=> response.json()) 
      .then(result=>{ 
        // Use the map index to set unique aptId values
        const apts = result.map((item, index) => ({
          ...item, // Copy existing item properties
          aptId: index
        }))
        setmyAppointment(apts)
        // Update lastIndex to the next available ID if you need it later
        setlastIndex(apts.length)
      }) 
  },[])

  // Rest of your component code...
}

Solution 2: Track Index with a Local Variable (If Starting from Non-Zero)

If you need aptId to start from the existing lastIndex value (e.g., if you're adding items later), use a local variable to track the index instead of relying on state during the loop:

function App() { 
  const [myAppointment, setmyAppointment] = useState([]) 
  const [lastIndex, setlastIndex] = useState(0) 
  const [orderBy, setorderBy] = useState('petName') 
  const [orderDir, setorderDir] = useState('asc') 
  const [queryText, setqueryText] = useState('') 

  useEffect(() => { 
    fetch('./data.json') 
      .then(response=> response.json()) 
      .then(result=>{ 
        let currentIndex = lastIndex; // Local variable to track increment
        const apts = result.map(item => {
          const newItem = {
            ...item,
            aptId: currentIndex
          };
          currentIndex++; // Increment local variable, not state
          return newItem;
        })
        setmyAppointment(apts)
        // Update state once with the final index value
        setlastIndex(currentIndex)
      }) 
  },[])

  // Rest of your component code...
}

Key Takeaway #

State is meant to track values that affect your component's render. For temporary values used during data processing (like incrementing an index for ID assignment), use a local variable instead of state. Only update state once you have the final value you need to persist.

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