Question

这是我第一次在此处发布任何内容，因此我很乐意就发布方式以及帖子本身发表评论。我距离编程学习只有8个星期，所以可能有很多错误。

在这种情况下，我特别需要以下代码的帮助。

A..B

不知何故，它击中了调试器，但未记录任何内容。我知道它正在影响我的路线和组件，因为稍后它会在某些代码中发现错误，但是它永远不会console.logs我的消息。

先谢谢了。

编辑：根据要求，我已经放入了整个组件。

Edit2：我不知道这是否相关，但是当它通过该组件中的所有调试器以及reducer中的一两个调试器时，就会出现错误：

B..A

这是减速器：

// 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);

编辑3：现在可以进行较小的更改。

更改1：

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 |

更改2：

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;
  }
};

显然，当它安装时，没有所需的道具，这就是为什么未定义课程的一部分。它在获取课程之前就进行渲染。

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) => { ... }

componentDidMount（）无法正常运行，但会击中调试器

1 个答案: