传递给 child 的反应道具没有被传递

Question

我想发送一个 id 到 child 但没有通过是在 parent 中登录但随后在 child 中它记录为 undefined.我找不到为什么它可能是一个错字，但我已经找了这么久，但我没有看到它。我希望有一双新的眼睛能发现这个问题。当我确认我想删除一个约会时，我收到一个 400 错误请求。

parent代码：

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;

child代码：


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,
        };

    }

传递给 child 的反应道具没有被传递

React props passed to child doesn't get passed

javascript

parent-child

http-status-code-400

reactjs

react-props