为什么会为我的日期选择器引发此错误?

时间:2019-09-22 04:23:47

标签: reactjs redux react-redux material-ui redux-form

我不知道为什么,但是当我在同一个文件中处理一些看似无关的东西时,就开始抛出此错误,我也不知道是什么原因启动的。它在完全没问题之前就可以正常工作了,我什至没有碰到发出错误的区域:

index.js:1375 Warning: Failed prop type: Invalid prop `value` of type `string` supplied to `DatePicker`, expected `object`.
    in DatePicker (created by ReduxFormMaterialUIDatePicker)
    in ReduxFormMaterialUIDatePicker (created by ConnectedField)
    in ConnectedField (created by ConnectFunction)
    in ConnectFunction (created by Connect(ConnectedField))
    in Connect(ConnectedField) (created by Field)
    in Field (created by Context.Consumer)
    in Hoc (created by Field)
    in Field (at AddWorkout.jsx:47)
    in form (at AddWorkout.jsx:46)
    in div (at AddWorkout.jsx:44)
    in AddWorkout (created by Form(AddWorkout))
    in Form(AddWorkout) (created by ConnectFunction)
    in ConnectFunction (created by Connect(Form(AddWorkout)))
    in Connect(Form(AddWorkout)) (created by ReduxForm)
    in ReduxForm (created by Context.Consumer)
    in Hoc (created by ReduxForm)
    in ReduxForm (at AddWorkoutForm.jsx:33)
...

我超级困惑。我尝试回去之前没有碰任何东西,但错误仍然存​​在... 我的目标是为DatePicker字段创建defaultValue作为当前日期。

const AddWorkout = ({ handleSubmit, submitting }) => (
  <div style={{ textAlign: "center" }}>
    <h2>Enter Your Workout Details</h2>
    <form onSubmit={handleSubmit} style={styles.form}>
      <Field
        name="date"
        component={DatePicker}
        format={null}
        hintText="Date Of Workout"
        fullWidth={true}
        locale="en-US"
      />
      <Field
        name="name"
        component={TextField}
        floatingLabelText="Workout Name"
        style={styles.textfield}
      />
      <Field
        name="duration"
        type="number"
        component={TextField}
        floatingLabelText="Estimated Duration"
        style={styles.textfield}
      />
      <FieldArray name="exercises" component={renderExercises} />
      <div style={styles.buttonWrapper}>
        <Button
          type="submit"
          color="primary"
          variant="contained"
          size="large"
          disabled={submitting}
          style={styles.button}
        >
          Submit
        </Button>
      </div>
    </form>
  </div>
);

const renderExercises = ({ fields, meta: { error, submitFailed } }) => (
  <>
    {/* {console.log(numberOfSets)} */}
    {fields.map((exercise, idx) => {
      return (
        <div key={idx}>
          <Field
            floatingLabelText="Exercise Name"
            name={`${exercise}.exerciseName`}
            component={TextField}
          />
          <FieldArray name={`${exercise}.sets`} component={renderSets} />
          <Button
            onClick={() => fields.remove(idx)}
            size="small"
            disableRipple
            fullWidth
          >
            REMOVE EXERCISE
          </Button>
        </div>
      );
    })}
    <Button
      type="button"
      size="small"
      disableRipple
      fullWidth
      onClick={() => fields.push({})}
    >
      Add Exercise
    </Button>
    {submitFailed && error && <span style={{ color: "red" }}>{error}</span>}
  </>
);

const renderSets = ({ fields }) => (
  <>
    <IconButton onClick={() => fields.push({})} size="small">
      <AddBoxIcon color="primary" />
    </IconButton>
    {fields.map((sets, idx) => (
      <div style={{ height: "80px" }} key={idx}>
        <Field
          floatingLabelText="Weight"
          type="number"
          name={`${sets}.weight`}
          component={TextField}
          style={styles.textfieldSet}
        />
        <Field
          floatingLabelText="Reps"
          type="number"
          name={`${sets}.reps`}
          component={TextField}
          style={styles.textfieldSet}
        />
        <IconButton
          onClick={() => fields.remove(idx)}
          style={styles.buttonSet}
          size="small"
        >
          <DeleteIcon color="secondary" />
        </IconButton>
      </div>
    ))}
  </>
);


export default reduxForm({
  form: "addworkout", // a unique identifier for this form
  initialValues: {
    date: new Date()
  },
  destroyOnUnmount: false,
  validate
})(AddWorkout);

感谢您的帮助!

0 个答案:

没有答案