initialValues仅在硬编码时预填充数据，但不在动态数据中预填充数据

Posted 2021-05-05

我正在尝试在对话框中填充表单字段，我正在使用redux表单

父组件代码

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正在更新，我只粘贴了我认为相关的代码但如果你还需要其他任何东西那么就知道了吗？

答案

axios是调用异步所以在这一行：

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 />);

}

另一答案

对我有用的解决方案是添加

enableReinitialize：如下所示在Dialog组件的reduxForm（）导出中为true

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

希望这有助于某人