2

这是我第一次在这里发布任何东西，所以我非常愿意对我发布的方式以及帖子本身发表评论。我刚刚学习编程 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：我不知道这是否相关，但是当它通过此组件中的所有调试器和减速器中的一两个调试器时，这是错误：

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

apparently when it mounted, it didn't have the props it needed which is part of why courses wasn't defined. It rendered before it grabbed courses.

4

1 回答 1

2

Your getUnits action that you dispatch inside componentDidMount expects courseId param, but you are passing none.

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) => { ... }
于 2018-07-02T22:17:27.727 回答