reactjs - initialValues 仅在硬编码时预填充数据，而不是动态数据

Question

我正在尝试在对话框中填充表单字段，并且正在使用 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')
                                            }
                                        />

添加NoteDialog组件

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 正在更新，我只粘贴了我认为相关的代码，但如果您需要其他任何内容，请让我知道

标签： reactjsreduxredux-form

Answer 1

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

enableReinitialize: true 在对话框组件的 reduxForm() 导出中，如下所示

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

希望这可以帮助某人