initialValues ​​предварительно заполняет данные только в жестком коде, но не в динамических данных - PullRequest
Новая
       6

initialValues ​​предварительно заполняет данные только в жестком коде, но не в динамических данных

0 голосов
/ 16 ноября 2018

Я пытаюсь заполнить поле формы внутри диалога, и я использую избыточную форму

Код родительского компонента 

constructor(props) {
        super(props);

        this.state = {
            user: {},
            student: {},
            url: false,
            permissions: 'canEdit',
            answers:{},
            questions:{},
            applications:{},
            isAddNoteDialogOpen: false,
            application_note: 'Hey'
        }
        this.toggleDialog = this.toggleDialog.bind(this);
    }

componentDidMount() {
        console.log('parent');
        if(this.props.match.params.id) {

            let axiosConfig = {};
                axiosConfig.headers = {
                Authorization: 'Bearer ' + this.props.auth.token
            };
            const url = `/application/internship/${this.props.match.params.id}`
            axios 
                .get(url, axiosConfig)
                .then((response) => {

                    this.setState({
                        student: response.data.student,
                        user: response.data.student.user,
                        url: true,
                        permissions: response.data.permissions,
                        applications: response.data.application[0],
                        answers: response.data.application[0].application_answers,
                        application_note: response.data.application[0].application_note,
                        questions: response.data.questions
                    });

                });
        }
    }

дочерний компонент, вызываемый из родителя 

<AddNoteDialog

                                            initialValues={{application_note: this.state.application_note}}
                                            application_note={this.state.application_note}
                                            application={applications.id}
                                            isOpen={isChangePasswordDialogOpen}
                                            setOpen={status =>
                                                this.toggleDialog(status, 'isChangePasswordDialogOpen')
                                            }
                                        />

AddNoteDialogComponent 

render() {
    const { isOpen, setOpen, submitting, handleSubmit } = this.props;

    return (
      <Dialog
        fullWidth
        open={isOpen}
        onClose={() => setOpen(false)}
        aria-labelledby="add-note-title"
      >
        <DialogTitle id="add-note-title">Enter Note</DialogTitle>

        <DialogContent>
          {/* <DialogContentText>Some Text</DialogContentText> */}
          <form
            id="add-note-details"
            onSubmit={handleSubmit(this.addNoteSubmit.bind(this))}
          >
            <Grid
              container
              justify={'center'}
              direction={'column'}
              spacing={24}
              >
              <Grid item xs={12}>
                  <Field
                  name="application_note"
                  component={renderTextField}
                  label="Note"
                  type="Text"
                  required
                  placeholder="Enter Note"
                  />
              </Grid>

            </Grid>
          </form>
        </DialogContent>
        <DialogActions>
          <LoadingButton
            variant="contained"
            color="secondary"
            type="submit"
            form={'add-note-details'}
            submitting={submitting}
          >
            UPDATE
          </LoadingButton>
          <Button
            id="closeModal"
            color="primary"
            onClick={() => setOpen(false)}
          >
            Cancel
          </Button>
        </DialogActions>
      </Dialog>
    );
  }
}

export default reduxForm({
  form: 'add-note-details-form',
  validate
})(AddNoteDialogComponent);

Теперь, когда я жестко закодировал initialValues ​​= {{application_note: "Hey"}} или если я установлю состояние по умолчанию, то оно будет работать правильно, но с данными, поступающими из axios, оно не показывает никаких данных

Обратите внимание: - this.state.application_note обновляется, и я вставил только тот код, который, как мне показалось, был уместен, но если вам нужно что-то еще, тогда дай мне знать

Ответы [ 2 ]

0 голосов
/ 16 ноября 2018

Решение, которое сработало для меня, было добавить

enableReinitialize: true в экспорте reduxForm () в компоненте Dialog, как показано ниже 

export default reduxForm({
  form: 'add-note-details-form',
  validate,
  enableReinitialize: true
})(AddNoteDialogComponent);

Надеюсь, это кому-нибудь поможет

0 голосов
/ 16 ноября 2018

Асиос вызова является асинхронным, поэтому в этой строке: 

initialValues={{application_note: this.state.application_note}}

this.state.application_note вероятно undefined.

Вам нужно дождаться окончания запроса axios, и , затем , вам нужно обновить свое состояние, и , затем , вам нужно обработать форму.

Примерно так: 

componentDidMount() {
...
axios.get(url, axiosConfig)
  .then((response) => {
    this.setState({
      student: response.data.student,
      user: response.data.student.user,
      url: true,
      permissions: response.data.permissions,
      applications: response.data.application[0],
      answers: response.data.application[0].application_answers,
      application_note: response.data.application[0].application_note,
      questions: response.data.questions
    });
  });
...
}

render() {

  // If we don't have the application_note then we don't want to show the form.
  // We want this data so that when we do show the form initialValues will contain
  // the data we want
  if (!this.state.application_note) {
    return 'Loading...';
  }
  // If we do have the data then we can return the form component.
  return (<YourFormComponent />);

}
...