如何通过使用onChange在文本字段中键入来更新数组中的状态？

Question

当我在文本字段中（尤其是在数组中）键入内容时，数组中的状态并未更新。我在数组外部使用的值正在更新。据我所知，数组中的值根本没有保存在文本字段中。

我一直试图操纵将数组对象传递给类的位置和方式，但是没有任何效果。

export default class AddWorkoutForm extends Component {
    state = {
        step: 1,
        workoutName: '',
        workoutDuration: 0,
        numOfExercises: 0,
        dateOfWorkout: '',
        exerciselist: [
            {
                exerciseName: '',
                numOfSets: 0,
                startingWeight: 0,
                startingReps: 0,
                restDuration: 0,
            }
        ],
    }

    // Proceed to next step
    nextStep = () => {
        const { step } = this.state;
        this.setState({
            step: step + 1
        });
    };

    // Go back to prev step
    prevStep = () => {
        const { step } = this.state;
        this.setState({
            step: step - 1
        });
    };

    // Handle fields change
    handleChange = e => {
        this.setState({ [e.target.name]: e.target.value });
    };

    render() {
        const { step } = this.state;
        const { workoutName, workoutDuration, numOfExercises, dateOfWorkout, exerciselist } = this.state;
        const { exerciseName, numOfSets, startingWeight, startingReps, restDuration } = exerciselist;
        const values = { workoutName, workoutDuration, numOfExercises, dateOfWorkout, 
            exerciseName, numOfSets, startingWeight, startingReps, restDuration  };
        switch (step) {
            case 1:
                return (
                    <AddWorkout
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );
            case 2:
                return (
                    <AddExercise
                        nextStep={this.nextStep}
                        prevStep={this.prevStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );
            case 3:
                return (
                    <AddWorkoutConfirm
                        nextStep={this.nextStep}
                        prevStep={this.prevStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );
            default:
                return (
                    <AddWorkout 
                        nextStep={this.nextStep}
                        handleChange={this.handleChange}
                        values={values}
                    />
                );
        }
    }
}

export default class AddExercise extends Component {

    continue = (e) => {
        e.preventDefault();
        this.props.nextStep();
    }

    back = e => {
        e.preventDefault();
        this.props.prevStep();
    };

    render() {
        const { values, handleChange } = this.props;
        const { exerciseName, numOfSets, startingWeight, startingReps, restDuration } = values;
        return (
            <div style={{ textAlign: "center", height: "100%" }}>
                <ClientMenuBar title="Add An Exercise" />
                <h2>Enter Your Exercise Details</h2>
                <form style={styles.textfieldWrapper}>
                    <TextField
                        fullWidth
                        label="Exercise Name"
                        margin="normal"
                        autoFocus
                        style={styles.textfield}
                        name="exerciseName"
                        onChange={handleChange}
                        defaultValue={exerciseName}
                    />
                    <TextField
                        fullWidth
                        label="Number of Sets"
                        margin="normal"
                        type="number"
                        style={styles.textfield}
                        name="numOfSets"
                        onChange={handleChange}
                        defaultValue={numOfSets}
                    />
                    <TextField
                        fullWidth
                        label="Starting Weight"
                        margin="normal"
                        type="number"
                        style={styles.textfield}
                        name="startingWeight"
                        onChange={handleChange}
                        defaultValue={startingWeight}
                    />
                    <TextField
                        fullWidth
                        label="Starting Number Of Reps"
                        margin="normal"
                        type="number"
                        style={styles.textfield}
                        name="startingReps"
                        onChange={handleChange}
                        defaultValue={startingReps}
                    />
                    <TextField
                        fullWidth
                        label="How Long Is Your Rest Period?"
                        margin="normal"
                        type="number"
                        style={styles.textfield}
                        name="restDuration"
                        onChange={handleChange}
                        defaultValue={restDuration}
                    />
                    <Button
                        color="inherit"
                        variant="contained"
                        style={styles.button}
                        size="large"
                        onClick={this.back}
                    >
                        back
                    </Button>
                    <Button
                        color="primary"
                        variant="contained"
                        style={styles.button}
                        size="large"
                        onClick={this.continue}
                    >
                        Next
                    </Button>
                </form>
            </div>
        )
    }
}

没有错误信息。当我浏览表单页面时，数组外部的变量正在正常更新，但是数组中的对象变量根本没有改变