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