在React中添加新项目后，本地状态被重置

import React, { useState } from 'react';

function MyComponent() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleAddItem = () => {
    setItems([...items, newItem]);
    setNewItem('');
  };

  return (
    <div>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

import React, { useReducer } from 'react';

const initialState = { items: [], newItem: '' };

function reducer(state, action) {
  switch (action.type) {
    case 'ADD_ITEM':
      return { ...state, items: [...state.items, state.newItem], newItem: '' };
    case 'UPDATE_ITEM':
      return { ...state, newItem: action.payload };
    default:
      return state;
  }
}

function MyComponent() {
  const [state, dispatch] = useReducer(reducer, initialState);

  return (
    <div>
      <input
        type="text"
        value={state.newItem}
        onChange={(e) => dispatch({ type: 'UPDATE_ITEM', payload: e.target.value })}
      />
      <button onClick={() => dispatch({ type: 'ADD_ITEM' })}>Add Item</button>
      <ul>
        {state.items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;

import React, { useState, useCallback } from 'react';

function MyComponent() {
  const [items, setItems] = useState([]);
  const [newItem, setNewItem] = useState('');

  const handleAddItem = useCallback(() => {
    setItems((prevItems) => [...prevItems, newItem]);
    setNewItem('');
  }, [newItem]);

  return (
    <div>
      <input
        type="text"
        value={newItem}
        onChange={(e) => setNewItem(e.target.value)}
      />
      <button onClick={handleAddItem}>Add Item</button>
      <ul>
        {items.map((item, index) => (
          <li key={index}>{item}</li>
        ))}
      </ul>
    </div>
  );
}

export default MyComponent;