javascript - 为什么地图未定义？

Question

我是 redux 的新手，我正在尝试将其合并到我的代码中，以便更轻松地管理状态。我试图在我的状态下映射一个数组，但它抛出以下错误：

未捕获的类型错误：无法读取未定义的属性“地图”

这是 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>
    )
}

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

任何帮助将不胜感激！

标签： javascriptreactjsreduxreact-redux

Answer 1

您要访问第一项还是workoutList？。从您的代码handleSelectedPanel接缝成为一个数组而不是一个对象。你的解构是否正确？你在哪里useSelector？。console.log(handleSelectedPanel)给你什么？尝试

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

或者

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