Javascript 为什么地图没有定义？

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

导出默认函数WorkoutItem（）{
const handleSelectedPanel=useSelector（state=>state.workoutList）；
const dispatch=usedpatch（）；
const{name，date，duration，exerciselist}=handleSelectedPanel；
返回(
分派（selectPanel（））}>
{name}
{date}
~{duration}分钟
名称
#集合
平均重复次数
重量
{exerciselist.map（（练习）=>(
))}
)
}

它应该显示一个面板列表，可以扩展以显示内容，但它抛出一个错误，表明exerciselist在我的状态中未定义

---

任何帮助都将不胜感激

是否要访问第一项或

工作列表

？。从您的代码

handleSelectedPanel

中，将接缝设置为数组而不是对象。你的解构正确吗？。您的

useSelector

在哪里？。

console.log（handleSelectedPanel）

为您提供了什么？试一试

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

或

---

你的意思是

const exerciselist=useSelector（state=>state.workoutList）？这似乎是一个打字错误，而不是重复/反应问题。这也是功能组件的一些基本错误。它没有
this
，因此您无法访问
this.props.handleEditChange
。您需要添加一些道具，如
功能工作项目（道具）
您的
使用选择器在哪里？
console.log（handleSelectedPanel）
提供了什么？
const handleSelectedPanel = useSelector(state => state.workoutList[0]);