React模态组件ID传递异常：CRUD应用模态框删除按钮报错求助

看起来你的CRUD应用里，删除模态框能正常弹出，但点击确认删除时抛出了Can not read property '_id' of undefined的错误——这几乎可以肯定是模态框组件没有正确获取到当前要删除的条目数据导致的。我来帮你拆解可能的问题和对应的解决办法：

可能的原因1：打开模态框时未传递目标条目 #

当你点击列表里的删除按钮时，可能只是打开了模态框，但没有把当前要删除的item传递给模态框组件，导致模态框内部的item是undefined，自然没法读取_id属性。

解决办法：在父组件中存储当前要删除的条目 #

在包含列表和模态框的父组件里，添加状态来保存当前选中的待删除条目，打开模态框时同步更新这个状态：

import React, { useState } from 'react';
import ModalItem from './ModalItem';

const ItemList = ({ items }) => {
  const [showDeleteModal, setShowDeleteModal] = useState(false);
  const [currentDeleteItem, setCurrentDeleteItem] = useState(null);

  // 点击删除按钮时，保存当前条目并打开模态框
  const openDeleteModal = (item) => {
    setCurrentDeleteItem(item);
    setShowDeleteModal(true);
  };

  // 实际执行删除的函数
  const handleDelete = (itemId) => {
    // 这里调用你的删除API，比如：
    // api.deleteItem(itemId).then(() => {/* 更新列表 */});
    setShowDeleteModal(false);
  };

  return (
    <div>
      {/* 渲染列表 */}
      {items.map(item => (
        <div key={item._id}>
          <span>{item.name}</span>
          <button onClick={() => openDeleteModal(item)}>删除</button>
        </div>
      ))}

      {/* 传递当前条目给模态框 */}
      <ModalItem
        show={showDeleteModal}
        onHide={() => setShowDeleteModal(false)}
        item={currentDeleteItem}
        onConfirmDelete={handleDelete}
      />
    </div>
  );
};

可能的原因2：模态框组件未正确接收/使用条目数据 #

你的ModalItem组件可能没有正确从props中获取item，或者在handleSubmit里错误地引用了未定义的变量。

解决办法：完善模态框组件的逻辑 #

确保模态框组件正确接收item props，并且在执行删除前先判断条目是否存在，避免报错：

import React from 'react';
import PropTypes from 'prop-types';
import { Modal, Button } from 'react-bootstrap';

const ModalItem = ({ show, onHide, item, onConfirmDelete }) => {
  // 如果item还未传入，先不渲染或显示提示
  if (!item) {
    return null;
  }

  const handleSubmit = () => {
    // 传入当前条目的_id给删除函数
    onConfirmDelete(item._id);
  };

  return (
    <Modal show={show} onHide={onHide}>
      <Modal.Header closeButton>
        <Modal.Title>确认删除</Modal.Title>
      </Modal.Header>
      <Modal.Body>
        确定要删除「{item.name}」这条数据吗？操作不可撤销。
      </Modal.Body>
      <Modal.Footer>
        <Button variant="secondary" onClick={onHide}>
          取消
        </Button>
        <Button variant="danger" onClick={handleSubmit}>
          确认删除
        </Button>
      </Modal.Footer>
    </Modal>
  );
};

// 定义props类型，避免传参错误
ModalItem.propTypes = {
  show: PropTypes.bool.isRequired,
  onHide: PropTypes.func.isRequired,
  item: PropTypes.object,
  onConfirmDelete: PropTypes.func.isRequired
};

export default ModalItem;

额外提示：避免闭包陷阱 #

如果你的列表是用map循环渲染的，要确保删除按钮的点击事件里能正确获取到当前item——用箭头函数包裹（像上面的onClick={() => openDeleteModal(item)}）是最稳妥的方式，避免因为闭包问题导致item指向错误的条目。

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