React setState覆盖数组状态

const [items, setItems] = useState([1, 2, 3]);

const addItem = (newItem) => {
  setItems([...items, newItem]); // 使用展开运算符添加新项
};

const [items, setItems] = useState([1, 2, 3]);

const addItem = (newItem) => {
  setItems(prevItems => [...prevItems, newItem]); // 使用前一个状态来更新
};

const [items, setItems] = useState([1, 2, 3]);

const addItem = (newItem) => {
  const updatedItems = items.concat(newItem); // 使用concat方法添加新项
  setItems(updatedItems);
};

import React, { useState } from 'react';

function TodoList() {
  const [todos, setTodos] = useState(['Learn React', 'Learn Hooks']);

  const addTodo = (todo) => {
    // 正确的更新方式
    setTodos(prevTodos => [...prevTodos, todo]);
  };

  return (
    <div>
      <ul>
        {todos.map((todo, index) => (
          <li key={index}>{todo}</li>
        ))}
      </ul>
      <button onClick={() => addTodo('New Todo')}>Add Todo</button>
    </div>
  );
}

export default TodoList;