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')
                                            }
                                        />

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

Answer 1

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

}

Answer 2

最适合我的解决方案是添加

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

public class CTipoGasto
{
  public static List<CTipoGasto> listaTipoGasto = new List<CTipoGasto>();
  public string descripción { get; set; }
  public int ID { get; set; }

  public override string ToString() {
    return descripción;
  }
}

希望这对某人有帮助

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

2 个答案: