如何在添加元素后展示更新后的arrayCodes数组？

Hey there! Let's troubleshoot why your page isn't showing the updated arrayCodes even though the console confirms the state is changing. This is a super common React gotcha, so let's break down the likely issues and fixes:

1. You're modifying the original state array directly (no re-render trigger) #

React relies on reference changes to detect state updates. If you're using push() or modifying the array in-place, React won't notice the change and won't re-render your component.

❌ Wrong way:

// This mutates the original array - React ignores this update
setArrayCodes(arrayCodes.push(userInput));

✅ Correct way: Create a new array
Use the spread operator or concat() to make a copy of the existing array, then add your new value. Even better, use the functional update pattern to ensure you're working with the latest state:

// Functional update gets the most recent state (prevArray)
setArrayCodes(prevArray => [...prevArray, userInput]);

// Or using concat() if you prefer
setArrayCodes(arrayCodes.concat(userInput));

2. Your display logic isn't using the updated array #

Double-check how you're rendering the array on the page. If you're hardcoding elements or not using the full updated state, you won't see the new value.

For example, if your current display code looks like this (hardcoding the first two elements):
❌ Wrong:

<div>{arrayCodes[0]}{arrayCodes[1]}</div>

✅ Correct: Adjust to include the new value in your desired format
Since you want the output A1A2(userInput), you can slice the first two elements, join them, then append the new value in parentheses (assuming the user input is the third element in the array):

<div>
  {arrayCodes.slice(0, 2).join('')}
  {arrayCodes.length > 2 ? `(${arrayCodes[2]})` : ''}
</div>

Or if you want to include all additional inputs (not just the first one):

<div>
  {arrayCodes.slice(0, 2).join('')}
  {arrayCodes.length > 2 ? `(${arrayCodes.slice(2).join(', ')})` : ''}
</div>

3. Quick full example to tie it all together #

Here's a complete React component that implements the fix correctly:

import { useState } from 'react';

function CodeDisplay() {
  const [arrayCodes, setArrayCodes] = useState(['A1', 'A2']);
  const [userInput, setUserInput] = useState('');

  const handleAddInput = (e) => {
    e.preventDefault();
    if (!userInput.trim()) return;
    
    // Update state correctly with a new array
    setArrayCodes(prev => [...prev, userInput]);
    setUserInput(''); // Clear input after submission
  };

  return (
    <div>
      <form onSubmit={handleAddInput}>
        <input
          type="text"
          value={userInput}
          onChange={(e) => setUserInput(e.target.value)}
          placeholder="Enter your code"
        />
        <button type="submit">Add to Array</button>
      </form>
      
      {/* Display in the desired format */}
      <h3>Output: </h3>
      <div>
        {arrayCodes.slice(0,2).join('')}
        {arrayCodes.length > 2 ? `(${arrayCodes.slice(2).join('')})` : ''}
      </div>
    </div>
  );
}

export default CodeDisplay;

Key Takeaways #

• Always create a new array when updating array state in React—never mutate the original.
• Use functional updates (prev => ...) to avoid issues with asynchronous state updates.
• Verify your display logic is actually using the full updated state array, not just a subset of it.

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