componentDidMount () не работает, но работает с отладчиком

Question

я впервые публикую здесь что-либо, поэтому я очень открыт для комментариев о том, как я написал, а также о самом посте. Я всего лишь 8 недель в изучении программирования, так что, вероятно, многое неправильно.

В этом случае мне особенно нужна помощь со следующим кодом.

// import React, { Component } from 'react'
import React from 'react' 
import { connect } from 'react-redux'
// import { Link } from 'react-router-dom'
import { getUnits } from '../reducers/units'
import { Menu, Container, Grid, Header,m} from 'semantic-ui-react'

class AllUnits extends React.Component {

  componentDidMount() {
    console.log ("component did mount!")
    debugger 
    this.props.dispatch(getUnits())
    debugger 
  }

  units = () => {
    debugger 
    return this.props.units.map( unit => {
      <Grid textAlign='center' columns={1}>
        <Grid.Row>
          <Grid.Column>
            <Menu fluid vertical>
              <Menu.Item className='header'>{this.position} {unit.name}</Menu.Item>
            </Menu>
          </Grid.Column>
        </Grid.Row>
      </Grid>
    })
  }

  render() {
    debugger 
    return (
      <Container>
        <Header as="h3" textAlign="center">Units</Header>
        { this.units() }
      </Container>
    )
  }
}
const mapStateToProps = (state) => {
  return { units: state.units }
  debugger 
}

export default connect(mapStateToProps)(AllUnits);

Каким-то образом он попадает в тот отладчик, но ничего не записывает. Я знаю, что он затрагивает мой маршрут и мой компонент, потому что позже он находит ошибку в некотором коде, но он никогда не утешает мои сообщения.

Спасибо заранее.

Редактировать: По запросу я вставил весь компонент.

Edit2: я не знаю, связано ли это, но когда он проходит через все отладчики в этом компоненте и один или два в редукторе, это ошибка:

TypeError: Cannot read property 'id' of undefined
AllUnits.componentDidMount
src/components/AllUnits.js:13
  10 | componentDidMount() {
  11 |   console.log ("component did mount!")
  12 |   debugger 
> 13 |   this.props.dispatch(getUnits())
  14 |   debugger 
  15 | }
  16 | 

А вот и редуктор:

import axios from 'axios';
import { setFlash } from './flash';
import { setHeaders } from './headers';
import { dispatch } from 'react';

const GET_UNITS = 'GET_UNITS'; 

export const getUnits = (courseId) => {
  return() => {
    axios.get(`/api/courses/${courseId}/units`)
      .then( res => {
        debugger
        dispatch({ type: GET_UNITS, units: res.data, headers: res.headers })
        dispatch(setHeaders(res.headers))
      })
      .catch( err => {
        dispatch(setHeaders(err.headers));
        dispatch(setFlash('Failed To Retrieve Units', 'red'));
    });
  }
}

export default (state = [], action) => {
  switch (action.type) {
    case GET_UNITS:
      return action.units;
    default:
      return state;
  }
};

Редактировать 3: теперь он работает с небольшими изменениями.

изменить 1:

const mapStateToProps = (state) => {
  return { units: state.units, course: state.course }
}

изменить 2:

componentDidUpdate(prevProps) {
    const { dispatch, course } = this.props
    if (prevProps.course.id !== course.id)
      dispatch(getUnits(course.id))
  }

по-видимому, когда он монтировался, у него не было реквизита, в котором он нуждался, что является частью того, почему курсы не были определены. Это оказало прежде, чем это захватило курсы.

Answer 1

Ваше getUnits действие, которое вы отправляете внутри componentDidMount, ожидает courseId параметр, но вы не передаете ничего.

TypeError: Невозможно прочитать свойство 'id' из неопределенного

componentDidMount() {
    console.log ("component did mount!")
    debugger 
    // missing param, any props we can use here?
    this.props.dispatch(getUnits(/* missing courseId param */))
    debugger 
}

// Action that expects courseId param
export const getUnits = (courseId) => { ... }