如何在reactjs的一个组件表中打开modal edit和addClient

当我通过redux创建一个模式时，我有一个问题，我已经说过了，但是当我试图打开编辑模式，但是来自add的表单是打开的，我不知道，我认为状态中有一些错误，但是我不知道，让我们试着在下面的代码中检查它

这是我从一个组件中得到的代码，我将它们分成了一些部分 组件中的状态

constructor(props) {
        super(props);

        this.state = {
            post : props.post,
            formData : {
              id : props.formData.id,
              first_name : props.formData.first_name,
              last_name : props.formData.last_name,  
              email : props.formData.email,
              gender : props.formData.gender,
              password : props.formData.password,
            },
            formError : {
              id : props.formError.id,
              first_name : props.formError.first_name,
              last_name : props.formError.last_name,  
              email : props.formError.email,
              gender : props.formError.gender,
              password : props.formError.password,
            },    
            isChecked : props.isChecked,
            // modal : props.modal, 
            // modal2 : props.modal2,           
            validForm : props.validForm,
            modalIsOpen : props.modalProps.open
        }

带组件的模态

handleModal = (event, modalType, modalProps) => {
      this.props.showModalAdmin(event, modalType, modalProps)
  }

  closeModal = () => {
    const { pocketRemoteService } = this.props
    this.props.hideModalAdmin(pocketRemoteService)
  }

handleUpdate（编辑）和submitupdate

submitUpdate = (event, paramData) => {
      event.preventDefault();
      const { isChecked } = this.state
      const { confirm } = Modal;
      const { pocketRemoteService } = this.props; 
      if (isChecked === false) {
          message.warning("Checkbox harap di checklist")
      } else {
          confirm({
            title: `Are you sure to edit ${this.props.formData.paramKey}`,
            onOk : () =>{            
     return this.props.submitForm(pocketRemoteService, paramData)
            .then((res) => {
              if (res) {
                this.props.getParameter(pocketRemoteService);
                Notification({ title : 'Success Updating Parameter' })
                    this.setState (prevState => ({
                        modal: !prevState.modal,
                        isChecked : false,
                        validForm : false
                    }))
              } 
            })
            .catch ((error) => {
                error.response.data.errors.map(e => {
                  NotificationError({
                    title: e.errorMessage               
                  })
                })            
            })}
          })       
      }
  }  

handleUpdate = (record, data) => {
      const { id, first_name, last_name, email, gender, password } = this.state.formData
      const { isChecked, formError } = this.state
      const { pocketRemoteService } = this.props
      const open = true
      const formName  = "edit-parameter"
      const paramData = {
        id : id,
        first_name : first_name,
        last_name : last_name,
        email : email ,
        gender : gender,
        password : password 
      }


      const userData = {
        open : true,
        formData : data

      }  
      console.log(this.props.modalProps)

       return (
          <Fragment>
           <AtiButton text={<i class="fa fa-edit"></i>} type="success" disabled={false} outline={true} block={false} events={{ onClick: () => this.handleModal(pocketRemoteService, 'Update', userData) }}></AtiButton>{' '}
            <AtiButton text={<i class="fa fa-trash"></i>} type="danger" disabled={false} outline={true} block={false} events={{ onClick: (event) => this.handleDelete(event, data) }}></AtiButton>                   
           <Modal  maskClosable={false} mask={false} footer={false} title={<FormattedMessage id="label.form.paramKey" />} visible={this.props.modalProps.open} onCancel={this.closeModal} >                      
            <AtiGridItem key="1">
              <AtiForm formId={formName} >
              <Row>
              <Col className="form-password">
              <AtiField name="id" >
                  <AtiTextbox
                    id="id"
                    name="id"
                    type="text"
                    className={`pocketbank-form form-control ${formError.id ?  'is-invalid'  : '' }`}
                    label={<FormattedMessage id="label.form.id" />}
                    value={id}
                    disabled = {true}
                    events={{
                        onChange: this.handleField

                    }}
                  /> 
                  {formError.id} 
                </AtiField>   
                </Col>                                            

                  <Col span={24} className="form-password">
                    <AtiField name="first_name" >
                      <AtiTextbox
                          id="first_name"
                          name="first_name"
                          type="text"
                          className={`pocketbank-form form-control ${formError.first_name ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.first_name" />}
                          value={first_name}
                          events={{
                              onChange: this.handleField
                          }}
                      />
                    </AtiField>
                    {formError.first_name}
                  </Col>

                  <Col span={24} className="form-password">
                    <AtiField name="last_name" >
                      <AtiTextbox
                          id="last_name"
                          name="last_name"
                          type="text"
                          className={`pocketbank-form form-control ${formError.last_name ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.last_name" />}
                          value={last_name}
                          events={{
                              onChange: this.handleField
                          }}
                      />
                    </AtiField>
                    {formError.last_name}
                  </Col>

                  <Col span={24} className="form-password">
                    <AtiField name="email" >
                      <AtiTextbox
                          id="email"
                          name="email"
                          type="text"
                          className={`pocketbank-form form-control ${formError.email ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.email" />}
                          value={email}
                          events={{
                              onChange: this.handleField
                          }}
                      />
                    </AtiField>
                    {formError.email}
                  </Col>

                  <Col span={24} className="form-password">
                    <AtiField name="gender" >
                      <AtiTextbox
                          id="gender"
                          name="gender"
                          type="text"
                          className={`pocketbank-form form-control ${formError.gender ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.gender" />}
                          value={gender}
                          events={{
                              onChange: this.handleField
                          }}
                      />
                    </AtiField>
                    {formError.gender}
                  </Col>

                  <Col span={24} className="form-password">
                    <AtiField name="password" >
                      <AtiTextbox
                          id="password"
                          name="password"
                          type="text"
                          className={`pocketbank-form form-control ${formError.password ?  'is-invalid'  : '' }`}
                          label={<FormattedMessage id="label.form.password" />}
                          value={password}
                          events={{
                              onChange: this.handleField
                          }}
                      />
                    </AtiField>
                    {formError.password}
                  </Col>

                  <Col span={24} className="form-password">
                  <AtiField name="checked" >
                    <label>
                      <AtiCheckbox events={{onChange: this.toggleChange}}  checked = {isChecked} value="remember-me" >
                        Are you sure, that your data is correct ?
                      </AtiCheckbox>                           
                    </label>
                  </AtiField>
                  </Col>


                <Col span={24} className="form-password">
                  <AtiField name="submit" >
                  <AtiButton
                      text="Update"      
                      type="primary"
                      disabled={this.state.validForm}
                      outline={true}
                      block={false}                           
                      events={{ onClick: (event) => this.submitUpdate(event, paramData)  }}
                  />{' '}

                  <AtiButton
                      text="Cancel"      
                      type="danger"
                      disabled={false}
                      outline={true}
                      block={false}                           
                      events={{ onClick: (event) => this.handleBatal(event) }}
                  />
                  </AtiField>     
                  </Col>
                </Row>
                </AtiForm> 
                </AtiGridItem>
           </Modal>
          </Fragment>

        )
  }

减速器

const initialState = {
    post : [],
    loading : false,
    formData : {
      id : '',
      email : '',
      gender : '',
      first_name : '',
      last_name : '',
      password : '',   
    },
    formError : {
        email : '',
        gender : '',
        first_name : '',
        last_name : '',
        password : '', 
    },    
    isChecked : false,
    modal : false,      
    modal2 : false,      
    validForm : false,
    modalType : null,
    modalProps : {
        open : false,
        formData : {
            id : '',
            email : '',
            gender : '',
            first_name : '',
            last_name : '',
            password : '',   
          },
    }
};

const handler = (currentState) => {
    const Parameter = {
        startLoading: () => ({ ...currentState, loading: true }),
        finishLoading: () => ({ ...currentState, loading: false }),
        getDataAdmin: (payload) => ({ ...currentState, post : payload }),
        showModal : (modalType, modalProps ) => ({...currentState, modalType : modalType, modalProps : modalProps }),
        hideModal : () => ({...currentState })


    };

    return {
        ...Parameter,
    };
};

export default (state = initialState, action) => {
    const { type, payload, modalType, modalProps } = action;
    switch (type) {
        case actionType.SUBMIT_FAILED:
            return handler(state).startLoading();
        case actionType.SUBMIT_SUCCESS:
            return handler(state).finishLoading();
        case actionType.FETCH_SUCCESS:
            return handler(state).getDataAdmin(payload);
        case actionType.SHOW_MODAL:
            return handler(state).showModal(modalType, modalProps);
        case actionType.HIDE_MODAL:
            return handler(state).hideModal();
        default:
            return state;
    }
};

我的ui图像

---

tyyy，很抱歉代码太多了，但它只是我代码的一半@

不确定问题出在哪里，但看起来hidemodal除了返回当前状态的浅拷贝之外什么都不做。您可以通过执行以下操作来简化处理程序：

consthandler={startLoading:（currentState）=>（{…currentState，load:true}），…}

并使用以下命令调用它：

returnhandler.startLoading（state）这没问题，在我像那样使用redux之前，它没有任何问题，但是当我想调用funtion modal时，我遇到了问题
export const showModal = (modalType, modalProps) => ({
    type: actionType.SHOW_MODAL,
    modalType, 
    modalProps
});

export const hideModal = () => ({
    type : actionType.HIDE_MODAL
})

export const showModalAdmin = ( service, modalType, modalProps ) => dispatch => {
    dispatch(showModal(modalType, modalProps))
}

export const hideModalAdmin = (service) => dispatch => {
    dispatch(hideModal())
}

const initialState = {
    post : [],
    loading : false,
    formData : {
      id : '',
      email : '',
      gender : '',
      first_name : '',
      last_name : '',
      password : '',   
    },
    formError : {
        email : '',
        gender : '',
        first_name : '',
        last_name : '',
        password : '', 
    },    
    isChecked : false,
    modal : false,      
    modal2 : false,      
    validForm : false,
    modalType : null,
    modalProps : {
        open : false,
        formData : {
            id : '',
            email : '',
            gender : '',
            first_name : '',
            last_name : '',
            password : '',   
          },
    }
};

const handler = (currentState) => {
    const Parameter = {
        startLoading: () => ({ ...currentState, loading: true }),
        finishLoading: () => ({ ...currentState, loading: false }),
        getDataAdmin: (payload) => ({ ...currentState, post : payload }),
        showModal : (modalType, modalProps ) => ({...currentState, modalType : modalType, modalProps : modalProps }),
        hideModal : () => ({...currentState })


    };

    return {
        ...Parameter,
    };
};

export default (state = initialState, action) => {
    const { type, payload, modalType, modalProps } = action;
    switch (type) {
        case actionType.SUBMIT_FAILED:
            return handler(state).startLoading();
        case actionType.SUBMIT_SUCCESS:
            return handler(state).finishLoading();
        case actionType.FETCH_SUCCESS:
            return handler(state).getDataAdmin(payload);
        case actionType.SHOW_MODAL:
            return handler(state).showModal(modalType, modalProps);
        case actionType.HIDE_MODAL:
            return handler(state).hideModal();
        default:
            return state;
    }
};