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

Question

我是新来的，我正在尝试创建一个应用程序以在我的投资组合中使用。本质上，该程序是一个可以访问不同菜单的菜单（json文件：texas_pick.js，boutine.js ...），该程序旨在以按钮的形式显示菜单选项，按钮的详细信息是从它们的相应的 json 文件。我面临的问题是，当单击菜单选项时，会检索最后一个菜单项的数据。我对后端进行了编程，只将商品的名称和价格推送到数据库，而前端则检索这些数据并将其显示在表格上。检索到的数据只是最后一个按钮的，而不是任何其他的。我相信问题可能出在我的按钮代码中。非常感谢您提供的任何帮助/提示/建议。 I clicked every menu item and only the data from the last one was retrieved

从“反应”导入反应 从“反应”导入 {useEffect,useState} 从'axios'导入axios 从“../../json_files/texas_pick.json”导入 Texas_Pick 导入'./Mid_Container.css'

函数 Mid_Container() { const [items, setItems] = useState(Texas_Pick);

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>
  );
}

使用 map 函数映射您的项目，并将当前项目传递给您的 onClickEvent。 我还认为您的按钮不需要 value 属性。它也不是像您那样进行操作的地方:)

您也不必在承诺的“then”中重新加载页面。 React 是用来做 SPA（单页应用程序）的，所以在“then”中，你可以放一些像“setResult(myResponse)”这样的代码来存储你从 API 获得的新数据。