Question

我有一个CRUD应用程序，除了模态弹出窗口中的删除按钮外，其他一切都有效。在应用程序中，当你点击删除时，弹出一个模态（成功发生），当你在模态视图中删除它时，它会抛出以下错误：

Can not read property '_id' of undefined:
at ModalItem.handleSubmit

以下是我的代码：

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

 import Item Service from './ItemService';
    class Modaltem extends React.Component {
      constructor(props) {
        super(props);
        this.addItemService = new ItemService();
        this.handleSubmit = this.handleSubmit.bind(this);
      }

      handleSubmit(event) {  //this is showing error at the curly bracket. unexpected token. not sure whats wrong here
        event.preventDefault();
        this.addItemService.deleteData(this.props.obj._id);
      }
      render() {
        // Render nothing if the "show" prop is false
        if (!this.props.show) {
          return null;
        }
        else {
          return (
            <div className="static-modal">
              <Modal.Dialog>
                <Modal.Header>
                  <Modal.Title>Ready to Delete Student</Modal.Title>
                </Modal.Header>

                <Modal.Body>Are you sure you want to delete this Student?</Modal.Body>

                <Modal.Footer>
                  <Button onClick={this.props.onClose}>Close</Button>
                  <form onSubmit={this.handleSubmit}>
                    <input type="submit" value="Delete" className="btn btn-danger" />
                  </form>

                </Modal.Footer>
              </Modal.Dialog>
            </div>
          );
        }
      }
    }
    }

    export default ModalItem;

这是我的Tablerow.js

import React from 'react';
import { Link } from 'react-router-dom';
import ModalItem from './ModalItem;

import Item Service from './ItemService';

class TableRow extends Component {

  constructor(props) {
      super(props);
      this.addItemService = new ItemService();
      this.state = {isOpen: false}; 
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }


  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.item}
          </td>
          <td>
          <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
        </td>
          <td>
          <button onClick={this.toggleModal}>
            Delete
          </button>
            <ModalItem
              show={this.state.isOpen}
              onClose={this.toggleModal}>
            </ModalItem>

          </td>
        </tr>
    );
  }
}

export default TableRow;

index.js

import App from './App';
import AddItem from './components/AddItem';
import IndexItem from './components/IndexItem';
import EditItem from './components/EditItem';

ReactDOM.render(
  <Router>
      <div>
        <Route exact path='/' component={App} />
        <Route path='/add-item' component={AddItem} />
        <Route path='/index' component={IndexItem} />
        <Route path='/edit/:id' component={EditItem} />
      </div>
  </Router>,
  document.getElementById('root')
);

Answer 1

您没有将obj传递给ModalItem。因此，Item尝试删除this.props.obj._id时失败，因为this.props.obj为undefined。请尝试以下Tablerow.js：

class TableRow extends Component {

  constructor(props) {
      super(props);
      this.addItemService = new ItemService();
      this.state = {isOpen: false}; 
  }

  toggleModal = () => {
    this.setState({
      isOpen: !this.state.isOpen
    });
  }


  render() {
    return (
        <tr>
          <td>
            {this.props.obj._id}
          </td>
          <td>
            {this.props.obj.item}
          </td>
          <td>
          <Link to={"/edit/"+this.props.obj._id} className="btn btn-primary">Edit</Link>
        </td>
          <td>
          <button onClick={this.toggleModal}>
            Delete
          </button>
            <ModalItem
              show={this.state.isOpen}
              obj={this.props.obj}
              onClose={this.toggleModal}>
            </ModalItem>

          </td>
        </tr>
    );
  }
}

export default TableRow;

我没有传入React

1 个答案: