按钮按下触发最后一个按钮的按下

Question

我是一个新手，我正在尝试创建一个应用程序来在我的投资组合中使用。本质上，该程序是一个可以访问不同菜单的菜单（json文件：texas_pick.js，Breakth.js…），该程序旨在以按钮的形式显示菜单选项，按钮的详细信息从各自的json文件中检索。我面临的问题是，单击菜单选项时，会检索最后一个菜单项的数据。我将后端编程为只将商品名称和价格推送到数据库，而前端则检索这些数据并将其显示在表上。检索到的数据只是最后一个按钮的数据，而不是其他任何按钮的数据。我相信问题可能在我的按钮代码中。非常感谢您提供的任何帮助/提示/建议。我点击了每个菜单项，只检索到最后一个菜单项中的数据

从反应导入React从反应导入axios从axios导入Texas_Pick从.../.../json_files/texas_pick.json导入。/Mid_Container.css'

const [order, setOrder] = useState({
    item: '',
    cost: ''
})
const createOrder = () => {
    axios
      .post("http://localhost:5000/orders", order)
      .then(res => {window.location.reload(false)})
      .catch(err => console.error(err));
}

const item1 = items[0];
const item2 = items[1];
const item3 = items[2];
const item4 = items[3];
const item5 = items[4];
const item6 = items[5];


return (
    <div className="Mid_Container">
        <button 
        style={{backgroundImage: `url(${item1.image})`}} 
        value={order.item=item1.item,order.cost=item1.price}             
        onClick={createOrder}
        >
            <p id="pPrice">${item1.price}</p>
            <p id="pItem" >{item1.item}</p>
        </button>

        <button 
        style={{backgroundImage: `url(${item2.image})`}} 
        value={order.item=item2.item,order.cost=item2.price}             
        onClick={createOrder}
        >
            <p id="pPrice">${item2.price}</p>
            <p id="pItem" >{item2.item}</p>
        </button>

        <button 
        style={{backgroundImage: `url(${item3.image})`}} 
        value={order.item=item3.item,order.cost=item3.price}             
        onClick={createOrder}
        >
            <p id="pPrice">${item3.price}</p>
            <p id="pItem" >{item3.item}</p>
        </button>

        <button 
        style={{backgroundImage: `url(${item4.image})`}} 
        value={order.item=item4.item,order.cost=item4.price}             
        onClick={createOrder}
        >
            <p id="pPrice">${item4.price}</p>
            <p id="pItem" >{item4.item}</p>
        </button>

    </div>
)

}

导出默认Mid_Container

Answer 1

我认为你应该采用这种方法：

function SomeComponent() {

  // Mocking your datas
  const [items, setItems] = React.useState([
    {
      price: "1",
      item: "i am the first",
      image: "image1.png",
    },
    {
      price: "7",
      item: "I am the second",
      image: "image2.png",
    },
    {
      price: "3",
      item: "i am the third",
      image: "image3.png",
    },
  ]);
  const [order, setOrder] = React.useState();
  const [myResponse, setMyResponse] = React.useState();

  const createOrder = (clickedItem) => {
    setOrder(clickedItem);
    console.log(clickedItem);
    // axios
    //   .post("http://somewhere", clickedItem)
    //   .then((res) => {
    //     setMyResponse(res); // or setMyResponse(res.json());
    //   })
    //   .catch((err) => console.error(err));
  };

  console.log('Log selected order in render loop ==> ', order);
  console.log('Log response in render loop ==> ', myResponse);
  
  return (
    <div>
      <div className="Mid_Container">
        {items.length && items.map((currItem, index) => {
          return (
            <button
              key={index}
              style={{ backgroundImage: `url(${currItem.image})` }}
              onClick={() => createOrder(currItem)}
            >
              <p id="pPrice">${currItem.price}</p>
              <p id="pItem">{currItem.item}</p>
            </button>
          );
        })}
      </div>
    </div>
  );
}