Question

我正在使用ReactJs和NodeJs构建应用程序。应用正在显示数据库或所有房间的数据。必须能够创建，编辑和删除房间。

创建和编辑正在运行。删除功能不是。

这是代码：

Rooms.js

export default class RoomsAdmin extends React.Component {
    constructor(props) {
        super(props);
        this.state = { rooms: [] };
        this.delete = this.delete.bind(this);
    }

    componentDidMount() {
        axios.get('http://localhost:3090/admin/')
            .then(response => {
                this.setState({ rooms: response.data });
            })
            .catch(function (error){
                console.log(error);
            })
    }

    componentDidUpdate() {
        axios.get('http://localhost:3090/admin/')
            .then(response => {
                this.setState({ rooms: response.data });
            })
            .catch(function (error){
                console.log(error);
            })
    }

    delete() {
        axios.get('http://localhost:3090/admin/delete/'+this.props.room._id)
            .then(console.log('Deleted'))
            .catch(err => console.log(err))
    }


 roomList() {
   const Room = props => (
      <div className="col-md-4">
       <div className="card mb-4 shadow-sm">
        <div className="card-body">
         <h5 class="card-title">{props.room.title}</h5>
          <p className="card-text">{props.room.description}</p>
           <div className="d-flex justify-content-between align-items-center">
           <div className="btn-group">
            <Link className="btn btn-sm btn-outline-secondary" 
            to={ "/edit/"+props.room._id}>Edit</Link>
          <button onClick={this.delete}>Delete</button>
        </div>
      </div>
    </div>
  </div>
</div>

        )

        return this.state.rooms.map(function (currentRoom, i) {
            return <Room room={currentRoom} key={i} />
        });
    }

    render() {
        return (

            <div>
                <Header />
                <div>
                    <div className="album py-5 bg-light">
                        <div className="container">
                            <div className="row">
                                {this.roomList()}
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }

}

点击删除后，出现此错误：

未捕获的TypeError：无法读取未定义的属性'_id'

任何提示将不胜感激。

Answer 1

您在这里使父母->子女关系混乱。只有一个组件，因此您没有props.room。相反，只需在回调函数中传递要删除的会议室ID。

<button onClick={this.delete.bind(null, props.room._id}>Delete</button>

和您的处理程序功能

delete(id) {

我会重命名您的处理程序，使其更加明确，而且delete是javascript中的关键字，因此最好避免使用该函数名。

deleteRoom(id) {
    axios.get(`http://localhost:3090/admin/delete/${id}`)
        .then(console.log('Deleted'))
        .catch(err => console.log(err))

编辑，我稍微清理了一下代码，将子组件移到了父组件之外，因此您无需在每次渲染时都重新初始化该组件。

export default class RoomsAdmin extends React.Component {
  constructor(props) {
    super(props)
    this.state = { rooms: [] }
    this.deleteRoom = this.deleteRoom.bind(this)
  }
  componentDidMount() {
    axios.get('http://localhost:3090/admin/')
      .then(response => {
        this.setState({ rooms: response.data })
      })
      .catch((error) => {
        console.log(error)
      })
  }

  componentDidUpdate() {
    axios.get('http://localhost:3090/admin/')
      .then(response => {
        this.setState({ rooms: response.data })
      })
      .catch((error) => {
        console.log(error)
      })
  }

  deleteRoom(id) {
    axios.get(`http://localhost:3090/admin/delete/${id}`)
      .then(console.log('Deleted'))
      .catch(err => console.log(err))
  }

  roomList() {
    return this.state.rooms.map((currentRoom, i) => (
      <Room 
        room={currentRoom}
        onDelete={this.deleteRoom.bind(null, currentRoom._id)}
        key={i}
      />
    ))
  }

  render() {
    return (
      <div>
        <Header />
        <div>
          <div className="album py-5 bg-light">
            <div className="container">
              <div className="row">{this.roomList()}</div>
            </div>
          </div>
        </div>
      </div>
    )
  }
}

const Room = props => (
  <div className="col-md-4">
    <div className="card mb-4 shadow-sm">
      <div className="card-body">
        <h5 class="card-title">{props.room.title}</h5>
        <p className="card-text">{props.room.description}</p>
        <div className="d-flex justify-content-between align-items-center">
          <div className="btn-group">
            <Link
              className="btn btn-sm btn-outline-secondary"
              to={`/edit/${props.room._id}`}
            >
              Edit
            </Link>
            <button onClick={props.onDelete}>Delete</button>
          </div>
        </div>
      </div>
    </div>
  </div>
)

为什么我的删除功能导致未定义的值错误？

1 个答案: