javascript - componentDidMount() 不工作但命中调试器

标签 javascript reactjs react-redux

这是我第一次在这里发布任何东西,所以我非常愿意对我发布的方式以及帖子本身发表评论。我刚刚学习编程 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);

不知何故,它击中了那个调试器,但没有记录任何东西。我知道它正在访问我的路线和我的组件,因为它稍后会在某些代码中发现错误,但它永远不会 console.logs 我的消息。

提前致谢。

编辑:应要求,我已放入整个组件。

Edit2:我不知道这是否相关,但是当它通过此组件中的所有调试器和 reducer 中的一两个调试器时,这是错误:
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 | 

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

显然,当它安装时,它没有所需的 Prop ,这是未定义类(class)的部分原因。它在获取类(class)之前渲染。

最佳答案

您的 getUnits您在 componentDidMount 内调度的操作预计 courseId参数,但你没有通过。

TypeError: Cannot read property 'id' of undefined


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

关于javascript - componentDidMount() 不工作但命中调试器,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51109873/

相关文章:

javascript - 我无法从 Draft-js 获取 html 输出?

javascript - 为什么在JavaScript注释中使用 '@'-@param

reactjs - 如何在行中放置自定义按钮标签,使用material-table和typeScript,以及他希望收到的 Prop 是什么?

reactjs - 带有溢出 :scroll - position selected element center 的菜单

reactjs - 违规 'requestIdleCallbackHandler ' 花费了 ms

javascript - React Redux 状态对象属性

javascript - 从对象数组中获取具有更多属性的对象

javascript - 使用 John Papa 的 AngularJS 样式指南,声明数据对象的正确方法是什么?

javascript - 如何在firebase中检索currentUser数据

javascript - Prop 在控制台中工作,但不在前端渲染 - React