React点击菜单按钮仅提交最后一项数据 是什么原因如何解决

问题根因 #

你现在的写法有2个核心错误导致每次都拿到最后一项数据：

• 你直接在button的value属性里执行order.item=xxx赋值操作，这属于直接修改React状态（违反React状态不可变原则），而且这个赋值是组件渲染阶段就同步执行的，不是点击的时候才触发：组件渲染时会依次给order赋值item1、item2、item3、item4，最终渲染结束后order就固定为最后一项item4的值，所以不管点哪个按钮调用createOrder，提交的都是最后一次赋值的结果
• 你没有用setOrder来更新状态，直接修改order的属性不会触发状态更新，逻辑本身就不符合React的状态管理规范

修复方案 #

核心逻辑调整 #

不需要提前给order赋值，点击哪个按钮就把对应按钮的菜品数据直接传入提交逻辑即可，同时可以用数组map遍历渲染按钮，不用手动写item1到itemN的重复代码，后续加菜品也不用改JSX结构。
同时修复HTML非法结构问题：同一个页面不能出现重复的id属性，你所有按钮里的p标签都用了pPrice、pItem，改成类名控制样式即可。

完整修复后代码 #

import React from 'react'
import {useState} from 'react'
import axios from 'axios'
import Texas_Pick from '../../json_files/texas_pick.json'
import './Mid_Container.css'

function Mid_Container() {
  // 菜单数据不需要存状态，直接用导入的json即可，除非后续有动态修改菜单的需求
  const items = Texas_Pick;

  const createOrder = (item, price) => {
    // 点击时直接传当前菜品的参数构造提交数据，不需要提前存到state
    axios
      .post("http://localhost:5000/orders", {
        item,
        cost: price
      })
      .then(res => {window.location.reload(false)})
      .catch(err => console.error(err));
  }

  return (
    <div className="Mid_Container">
      {/* 用map遍历渲染所有菜品按钮，不用手动写重复代码 */}
      {items.map((dish, index) => (
        <button 
          key={index}
          style={{backgroundImage: `url(${dish.image})`}} 
          // 点击时传入当前菜品的名称和价格
          onClick={() => createOrder(dish.item, dish.price)}
        >
          <p className="pPrice">${dish.price}</p>
          <p className="pItem">{dish.item}</p>
        </button>
      ))}
    </div>
  )
}

export default Mid_Container

可选优化提示 #

如果后续需要在提交前展示选中的菜品，再用setOrder存选中状态即可，你当前的提交逻辑不需要提前存储选中值，直接传参更简洁。

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