传递给孩子的反应道具未传递

Question

我想向孩子发送一个ID，但没有通过，它是在父级中登录的，但是在子级中，它的登录为undefined。我找不到为什么是错字，但我已经看了很久了，我没看到。我希望能有新的发现。当我确认要删除某个约会时，收到400错误的请求。

父代码：

class CalenderModal extends React.Component {

  constructor(props) {
    super(props);
    this.state = {

      id: this.props.id,

    };
    this.openDeleteAppointment = this.openDeleteAppointment.bind(this);
  }

  openDeleteAppointment() {

    this.setState({
      openDeleteAppointment: true,
    })

  }


  render() {

    return (

      <div className="customModal">

        <div className="modal-header">

          {action === "Update" ?
            <button className="btn modal__button__red" onClick={() => { this.openDeleteAppointment() }}>Delete</button> : ""}
            {console.log("appointment id",this.state.id)}
          {this.state.openDeleteAppointment &&
            <DeleteAppointmentModal appointment={this.state.id} onHide={() => this.setState({ openDeleteClient: false, id: null })} show />}

        </div>

      </div>
    );

  }

}

export default CalenderModal;

子代码：

class DeleteAppointmentModal extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            id: this.props.appointment.id,
        };

    }

    render() {
        const {id} = this.state
        const DELETE_MUTATION = gql`
   mutation DeleteMutation($id:ID! ) {
   deleteAppointment(id:$id) {
     id
   }
 }
     `
     console.log("delete id",this.state.id)
        return (
            <React.Fragment>
                {
                    <Modal
                        {...this.props}
                        size="lg"
                        aria-labelledby="contained-modal-update-client"
                        centered
                    >
                        <Modal.Header closeButton >
                            <Modal.Title id="contained-modal-title-vcenter" className="tittle">Delete Appointment </Modal.Title>
                        </Modal.Header>
                        <Modal.Body>
                            <div className="delete-content">
                                Are you sure you want to delete this appointment?

                            </div>
                        </Modal.Body>
                        <Modal.Footer>
                        <button onClick={() => this.props.onHide() } className="btn no">No</button>
                            <Mutation mutation={DELETE_MUTATION}
                                variables={{id}}>
                                {/* onCompleted={() => this.props.history.push('/')} */}

                                {deleteMutation =>
                                    <button onClick={() => { deleteMutation(); this.props.onHide() }} className="btn yes">Yes</button>


                                }
                            </Mutation>

                        </Modal.Footer>
                    </Modal>

                }
            </React.Fragment>

        );
    }
}

export default DeleteAppointmentModal;

Answer 1

在DeleteAppointmentModal组件构造函数中，仅使用this.props.appointment。因为您正在使用包裹在花括号中的JSX代码将id传递给组件，所以]

代码：

constructor(props) {
        super(props);
        this.state = {
            id: this.props.appointment,
        };

    }