Question

当我调用它时，数组“成员”的长度显然是不确定的。老实说，我迷失了。它说在redux devTools中数组中有一个对象，所以它不应该正确返回长度吗？仅当我尝试提交表单以显示值的检查时，才会发生错误。

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}
                defaultDate={Date.now()}
                hintText="Date Of Workout"
                fullWidth={true}
                locale="en-US"
            />
            <Field
                name="name"
                component={TextField}
                floatingLabelText="Workout Name"
                style={styles.textfield}
            />
            <Field
                name="duration"
                component={TextField}
                floatingLabelText="Estimated Duration"
                style={styles.textfield}
            />
            <FieldArray name="members" 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: { touched, error, submitFailed } }) => (
    <>
        {fields.map((exercise, idx) => {
            return (
                <div key={idx}>
                    <Field
                        fullWidth={true}
                        floatingLabelText="Exercise Name"
                        name={`${exercise}.exerciseName`}
                        component={TextField}
                    />
                    <Field
                        floatingLabelText="Starting # Of Reps"
                        type="number"
                        name={`${exercise}.reps`}
                        component={TextField}
                        style={styles.textfield}
                    />
                    <Field
                        floatingLabelText="Starting Weight"
                        type="number"
                        name={`${exercise}.weight`}
                        component={TextField}
                        style={styles.textfield}
                    />
                    <Field
                        floatingLabelText="# of Sets"
                        type="number"
                        name={`${exercise}.numberOfSets`}
                        component={TextField}
                        style={styles.textfield}
                    />
                    <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>
    </>
);

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

const AddWorkoutConfirm = ( values, prevStep, handleSubmit ) => {
    const { name, duration, date, members } = values;
    return (
        <div style={{ textAlign: "center", height: "100%" }}>
            <ClientMenuBar title="Confirm Your Details" />
            <h2>Enter Your Workout Details</h2>
            <form onSubmit={handleSubmit} style={styles.form}>
                <List>
                    <ListItem>Workout Name: {name}</ListItem>
                    <ListItem>Estimated Duration Of Workout: {duration} mins</ListItem>
                    <ListItem>Number Of Exercises: {members.length}</ListItem>
                    <ListItem>Date Of Workout: {date.toString()}</ListItem>
                </List>
                <div style={{ borderTop: "1px solid gray" }}>
                    {
                        members.map((exercise, index) => (
                            <List key={`${index}`}>
                                <ListItem>Exercise Name: {exercise.exerciseName}</ListItem>
                                <ListItem>Number of Sets: {exercise.numberOfSets}</ListItem>
                                <ListItem>Starting Weight: {exercise.weight} lbs</ListItem>
                                <ListItem>Starting Number Of Reps: {exercise.reps}</ListItem>
                            </List>
                        ))}
                </div>
                <br />
                <div style={styles.buttonWrapper}>
                    <Button
                        color="inherit"
                        variant="contained"
                        style={styles.button}
                        size="large"
                        onClick={prevStep}
                    >
                        Back
                </Button>
                    <Button
                        color="primary"
                        variant="contained"
                        type="submit"
                        style={styles.button}
                        size="large"
                    >
                        Confirm
                </Button>
                </div>
            </form>
        </div>
    );
}

export default connect(state => ({
    values: getFormValues('addworkout')(state)
}))(AddWorkoutConfirm);

这是它返回的确切错误：

Uncaught TypeError: Cannot read property 'length' of undefined
    at AddWorkoutConfirm (AddWorkoutConfirm.jsx:21)
    at renderWithHooks (react-dom.development.js:13449)
    at mountIndeterminateComponent (react-dom.development.js:15605)
    at beginWork (react-dom.development.js:16238)
    at performUnitOfWork (react-dom.development.js:20279)
    at workLoop (react-dom.development.js:20320)
    at HTMLUnknownElement.callCallback (react-dom.development.js:147)
    at Object.invokeGuardedCallbackDev (react-dom.development.js:196)
    at invokeGuardedCallback (react-dom.development.js:250)
    at replayUnitOfWork (react-dom.development.js:19503)
    at renderRoot (react-dom.development.js:20433)
    at performWorkOnRoot (react-dom.development.js:21357)
    at performWork (react-dom.development.js:21267)
    at performSyncWork (react-dom.development.js:21241)
    at interactiveUpdates$1 (react-dom.development.js:21526)
    at interactiveUpdates (react-dom.development.js:2268)
    at dispatchInteractiveEvent (react-dom.development.js:5085)

任何建议将不胜感激

Answer 1

AddWorkoutConfirm组件仅包含一个称为props的参数-当前已定义为包含三个参数values，prevStep和handleSubmit。为了清楚起见，如果我们从参数中删除解构，您的前几行应为：

const AddWorkoutConfirm = (props) => {
  // The `values` prop comes from the first argument to your `connect` hoc 
  const { values, prevStep, handleSubmit } = props;
  const { name, duration, date, members } = values;
...

当然，您可以将解构方法移到component参数本身中：

const AddWorkoutConfirm = ({ values, prevStep, handleSubmit }) => {
...

为什么不定义数组的长度？

1 个答案: