Question

我是redux的新手，我正在尝试将其合并到我的代码中，以便可以更轻松地管理状态。我正在尝试通过处于状态的数组进行映射，但是它在下面抛出了错误：

未捕获的TypeError：无法读取未定义的属性“ map”

这是redux的还原器

const initialState = {
    workoutlist: [
        {
            id: uuid.v4(),
            name: 'Leg Day',
            date: '08-09-2019',
            duration: "60",
            exerciselist: [
                {
                    id: uuid.v4(),
                    exerciseName: 'Squats',
                    numberOfSets: "3",
                    reps: "12",
                    weight: "135",
                },
                {
                    id: uuid.v4(),
                    exerciseName: 'Leg press',
                    numberOfSets: "3",
                    reps: "10",
                    weight: "150",
                },
                {
                    id: uuid.v4(),
                    exerciseName: 'Lunges',
                    numberOfSets: "4",
                    reps: "12",
                    weight: "0",
                },
            ],
            selected: false,
        },
        {
            id: uuid.v4(),
            name: 'Running',
            date: '08-11-2019',
            duration: "40",
            exerciselist: [],
            selected: false,

        },
    ],
    disabled: true,
    page: 1,
}

const workoutList = (state = initialState, action) => {
    switch(action.type) {

        // Returns whether the panel is selected or not 
        // and enables Start Workout button if only 1 is selected
        case 'SELECT_PANEL':
            state = {
                workoutlist: state.workoutlist.map(workout => {
                    if (workout.id === action.id) {
                        workout.selected = !workout.selected
                    }
                    return workout;
                })
            }
            var count = 0;
            state.workoutlist.map((workout) => {
                if (workout.selected === true) {
                    count = count + 1;
                }
                return count;
            })
            if (count !== 1) {
                state = {
                    ...state,
                    disabled: true
                }
            } else {
                state = {
                    ...state,
                    disabled: false
                }
            }
            return state;

        default:
            return state;
    }
}

这是引发错误的组件。

export default function WorkoutItem() {
    const handleSelectedPanel = useSelector(state => state.workoutList);
    const dispatch = useDispatch();
    const { name, date, duration, exerciselist } = handleSelectedPanel;
    return (
        <ExpansionPanel style={styles.panel} onChange={() => dispatch(selectPanel())}>
            <ExpansionPanelSummary>
                <Typography variant="button" style={styles.header}>
                    {name}
                </Typography>
                <Typography variant="button" style={styles.header}>
                    {date}
                </Typography>
                <Typography align="right" style={styles.header}>
                    ~{duration} mins
                    </Typography>
            </ExpansionPanelSummary>
            <ExpansionPanelDetails>
                <Table size="medium" style={styles.table}>
                    <TableHead>
                        <TableRow>
                            <TableCell padding="none" >Name</TableCell>
                            <TableCell padding="none" align="right"># of sets</TableCell>
                            <TableCell padding="none" align="right">average reps</TableCell>
                            <TableCell padding="none" align="right">weight</TableCell>
                        </TableRow>
                    </TableHead>
                    <TableBody>
                        {exerciselist.map((exercise) => (
                            <ExerciseList
                                key={exercise.id}
                                exercise={exercise}
                            />
                        ))}
                    </TableBody>
                </Table>
                <ExpansionPanelActions disableSpacing style={styles.actionButton}>
                    <EditWorkoutItem
                        workout={this.props.workout}
                        handleEditChange={this.props.handleEditChange}
                    />
                </ExpansionPanelActions>
            </ExpansionPanelDetails>
        </ExpansionPanel>
    )
}

应该显示可扩展以显示内容的面板列表，但会抛出错误，表明练习列表显然在我的状态下未定义。

任何帮助将不胜感激！

Answer 1

您要访问第一项还是workoutList？根据您的代码handleSelectedPanel，接缝将成为数组而不是对象。您的销毁是否正确？您的useSelector在哪里？ console.log(handleSelectedPanel)给您什么？试试

const { name, date, duration, exerciselist } = handleSelectedPanel[0];

或

const handleSelectedPanel = useSelector(state => state.workoutList[0]);

为什么地图未定义？

1 个答案: