TypeError：无法读取未定义的属性（读取“名称”）

Posted 2023-02-22

【中文标题】TypeError：无法读取未定义的属性（读取“名称”）

【英文标题】：TypeError: Cannot read properties of undefined (reading 'name')

【发布时间】：2021-11-13 12:53:22

【问题描述】：

单击查看按钮时，我正在尝试使用引导模式在表格中显示每个项目。 我最初是在一个文件中完成的，但现在我试图将模式与项目列表分开，这意味着我现在有两个文件，我收到此错误：TypeError: Cannot read未定义的属性（读取“名称”）

以下是我的代码： ModalPractice.js

import React, useState from 'react';
import  Table  from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import  DetailModal  from './DetailModal';

const ModalPractice = () => 
  const [show, setShow] = useState(false);

  const [selectedItem, setSelectedItem] = useState();

  const handleClose = () => 
    setShow(false);
    setSelectedItem();
  ;

  const handleShow = (e, item) => 
    setShow(true);
    setSelectedItem(item);
  ;

  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>selectedItem.name</Modal.Title>
        </Modal.Header>
        <Modal.Body>selectedItem.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>
          </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='' src=list.image width='100' height='100' />
              </td>
              <td>
                <DetailModal
                  id=list.id
                  name=list.name
                  category=list.category
                  handleShow=handleShow
                  handleClose=handleClose
                  show=show
                  selectedItem=selectedItem
                />
              </td>
            </tr>
          ))
        </tbody>
      </Table>
    </div>
  );
;

export default ModalPractice;

DetailModal.js

import React from 'react';
import 'bootstrap/dist/css/bootstrap.min.css';
import  Button, Modal  from 'react-bootstrap';

export const DetailModal = (props) => 
  const selectedItem, show, handleClose, handleShow, list = props
  return (
    <div>
      <Modal show=show onHide=handleClose>
        <Modal.Header closeButton>
          <Modal.Title>selectedItem.name</Modal.Title>
        </Modal.Header>
        <Modal.Body>selectedItem.category</Modal.Body>
        <Modal.Footer>
          <Button variant='secondary' onClick=handleClose>
            Close
          </Button>
          <Button variant='primary' onClick=handleClose>
            Save Changes
          </Button>
        </Modal.Footer>
      </Modal>
      <Button variant='primary' onClick=(e) => handleShow(e, list)>
        Detail
      </Button>
      console.log(props)
    </div>
  );
;

【问题讨论】：

从快速跟踪您的代码开始，我相信您在DetailModal 中遗漏了一个list 属性。我怀疑你打算从父母那里传递list=list？

是的。谢谢。刚刚发现。

【参考方案1】：

它显示未定义，因为您没有将列表道具传递给 DetailModal

应该是这样的

ModalPractice.js

import React, useState from 'react';
import  Table  from 'react-bootstrap';
import 'bootstrap/dist/css/bootstrap.min.css';
import  DetailModal  from './DetailModal';

const ModalPractice = () => 
  const [show, setShow] = useState(false);

  const [selectedItem, setSelectedItem] = useState();

  const handleClose = () => 
    setShow(false);
    setSelectedItem();
  ;

  const handleShow = (e, item) => 
    setShow(true);
    setSelectedItem(item);
  ;

  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>selectedItem.name</Modal.Title>
        </Modal.Header>
        <Modal.Body>selectedItem.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>
          </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='' src=list.image width='100' height='100' />
              </td>
              <td>
                <DetailModal
                  id=list.id
                  name=list.name
                  category=list.category
                  handleShow=handleShow
                  handleClose=handleClose
                  show=show
                  list=list
                  selectedItem=selectedItem
                />
              </td>
            </tr>
          ))
        </tbody>
      </Table>
    </div>
  );
;

export default ModalPractice;