React点击按钮获取对应菜品名称及分类的实现问题

我明白你的问题了——现在点击每个菜品的Detail按钮后，弹窗里显示的是所有菜品的名称和分类，而不是你点击的那一个。问题出在你没有跟踪当前选中的菜品，反而直接在弹窗里遍历了整个food数组。咱们来一步步修复这个问题：

步骤1：添加状态存储选中的菜品 #

首先，你需要一个状态来保存用户点击的那道菜品，这样弹窗就能知道要展示哪一个的信息。在组件里新增一个selectedFood状态：

const [selectedFood, setSelectedFood] = useState(null);

步骤2：修改弹窗触发函数，传递当前菜品 #

原来的handleShow只是打开弹窗，现在要让它接收点击的菜品对象，把它存入selectedFood状态，再打开弹窗：

const handleShow = (foodItem) => {
  setSelectedFood(foodItem);
  setShow(true);
};

步骤3：修改按钮的点击事件，传递当前菜品 #

在表格里的Detail按钮中，调用handleShow时要把当前遍历的list（也就是当前菜品）传进去：

<Button variant='primary' onClick={() => handleShow(list)}> Detail </Button>

步骤4：让弹窗显示选中菜品的信息 #

现在弹窗里不用再遍历整个food数组了，直接使用selectedFood里的信息即可。为了避免初始状态为null时报错，我们可以用**可选链操作符?.**来安全访问属性：

<Modal show={show} onHide={handleClose}>
  <Modal.Header closeButton>
    <Modal.Title>{selectedFood?.name}</Modal.Title>
  </Modal.Header>
  <Modal.Body>分类：{selectedFood?.category}</Modal.Body>
  <Modal.Footer>
    <Button variant='secondary' onClick={handleClose}> Close </Button>
    <Button variant='primary' onClick={handleClose}> Save Changes </Button>
  </Modal.Footer>
</Modal>

完整修改后的代码 #

import { useState } from 'react';
import { Modal, Button, Table } from 'react-bootstrap';

const ModalPractice = () => { 
  const [show, setShow] = useState(false); 
  const [selectedFood, setSelectedFood] = useState(null); // 新增状态
  const handleClose = () => setShow(false); 

  // 修改后的handleShow，接收菜品参数
  const handleShow = (foodItem) => {
    setSelectedFood(foodItem);
    setShow(true);
  };

  const food = [ 
    { id: 1, name: 'rice', category: 'grain', image: 'images/rice.jpg', }, 
    { id: 2, name: 'beans', category: 'grain and protein', image: 'images/beans.jpg', }, 
    { id: 3, name: 'amala', category: 'swallow', image: 'images/amala.jpg', }, 
    { id: 4, name: 'Oat', category: 'cereals', image: 'images/oat.jpg', }, 
    { id: 5, name: 'coke', category: 'soft drink', image: 'images/coke.jpg', }, 
    { id: 6, name: 'banana', category: 'fruit', image: 'images/banana.jpg', }, 
    { id: 7, name: 'okra', category: 'vegetable', image: 'images/okra.jpg', }, 
    { id: 8, name: 'yam', category: 'tuber', image: 'images/yam.jpg', }, 
    { id: 9, name: 'palm oil', category: 'fat', image: 'images/palmoil.jpg', }, 
    { id: 10, name: 'orange', category: 'fruit', image: 'images/orange.jpg', }, 
  ]; 

  return ( 
    <div> 
      <Modal show={show} onHide={handleClose}> 
        <Modal.Header closeButton> 
          <Modal.Title>{selectedFood?.name}</Modal.Title> 
        </Modal.Header> 
        <Modal.Body>分类：{selectedFood?.category}</Modal.Body> 
        <Modal.Footer> 
          <Button variant='secondary' onClick={handleClose}> Close </Button> 
          <Button variant='primary' onClick={handleClose}> Save Changes </Button> 
        </Modal.Footer> 
      </Modal> 

      <Table striped bordered hover> 
        <thead> 
          <tr> 
            <th>#</th> 
            <th>Food Name</th> 
            <th>Food Category</th> 
            <th>Image</th> 
            <th>Action</th> {/* 新增表头，让表格更清晰 */}
          </tr> 
        </thead> 
        <tbody> 
          {food.map((list) => ( 
            <tr className='align-middle' key={list.id}> 
              <td>{list.id}</td> 
              <td>{list.name}</td> 
              <td>{list.category}</td> 
              <td> 
                <img alt={list.name} src={list.image} width='100' height='100' /> {/* 补充alt属性，提升可访问性 */}
              </td> 
              <td> 
                <Button variant='primary' onClick={() => handleShow(list)}> Detail </Button> 
              </td> 
            </tr> 
          ))} 
        </tbody> 
      </Table> 
    </div> 
  ); 
}; 

export default ModalPractice;

这样修改后，点击任意菜品的Detail按钮，弹窗就会精准显示该菜品的名称和分类了。另外我还顺便给图片补充了alt属性，给表格加了Action表头，提升了代码的可访问性和可读性。

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