React.js中如何实现点击按钮时创建新条目？

你的代码存在两个关键问题导致无法生成新条目：

• 每次点击按钮时，你把整个菜品数组都添加到了menuList，而不是当前点击的单个菜品
• 页面仅渲染了单个menuItem变量，没有遍历展示menuList中的所有条目

以下是修改后的代码：

import React, { useState } from "react";

function Menu() {
  const [menuList, setMenuList] = useState([]);

  function addNewItem(e) {
    e.preventDefault();
    // 获取当前点击的菜品，添加到列表中
    const selectedItem = e.target.value;
    // 使用函数式更新确保获取最新的列表状态
    setMenuList(prevList => [...prevList, selectedItem]);
  }

  return (
    <div>
      <button onClick={addNewItem} value="Spaghetti">
        Spaghetti
      </button>
      <button onClick={addNewItem} value="Alfredo">
        Alfredo
      </button>
      <button onClick={addNewItem} value="Lasagna">
        Lasagna
      </button>
      <button onClick={addNewItem} value="Tortellini">
        Tortellini
      </button>
      <button onClick={addNewItem} value="Shrimp Scampi">
        Shrimp Scampi
      </button>
      <button onClick={addNewItem} value="Pizza">
        Pizza
      </button>
      {/* 遍历menuList，渲染所有添加的条目 */}
      <div>
        {menuList.map((item, index) => (
          <div key={index}>{item}</div>
        ))}
      </div>
    </div>
  );
}

export default Menu;

关键修改说明： #

• 移除了无用的menuItem状态，直接通过menuList管理所有已添加的菜品
• addNewItem函数中，仅将当前点击的菜品（e.target.value）添加到列表，而非整个菜品数组
• 使用函数式更新（prevList => [...prevList, selectedItem]）确保每次更新都基于最新的列表状态，避免状态更新滞后问题
• 在渲染部分通过map遍历menuList，为每个条目生成独立的DOM元素，同时添加key属性保证React列表渲染性能

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