-1

我在从 React 组件中的 mapDispatchToProps 函数中检索道具时遇到问题。当我尝试渲染我的道具时，我收到一条未定义的消息，当我 console.log out 道具时，我也看不到我正在调度的 getProjects 函数。

我试图在任何地方 console.log 来查看数据停止的位置，并查看我的函数已被调度并获取数据，但数据没有返回到我的 React 组件道具。这可能是一个简单的修复，只是想换一双眼睛看看我的道具未定义的可能原因。将在下面发布我的 React 组件和 redux 存储中的代码。

React 组件（应该为我的投资组合渲染项目）

    import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchProjects } from '../store/projects';
import SingleProject from './SingleProject'
import { Link } from 'react-router-dom'

export class AllProjects extends Component {
    constructor(props) {
        super(props);
        this.state = {
            projects: [],
        }
    }

    componentDidMount() {
        try {
            this.props.getProjects()
        } catch (error) {
            console.log(error)
        }

        console.log('this is state -->', this.state)
    }

    render() {
        const project = this.props.projects
        console.log('this is getProjects -->', project)

        return (
            <div>
                <div className='container'>
                     {
                        project.map(pro => (
                            <div key={pro.id}>
                                <Link to={`/projects/${pro.id}`}>
                                    <h3>Project Name: {pro.projectName}</h3>
                                    <img src={pro.projectImage} />
                                </Link>
                            </div>
                        ))
                    } 
                </div>
            </div>
        )
    }
}

const mapStateToProps = (state) => ({
    projects: state.projects.projects
});

const mapDispatchToProps = (dispatch) => ({
    getProjects: () => dispatch(fetchProjects())
});

export default connect(mapStateToProps, mapDispatchToProps)(AllProjects)

Redux 存储（动作，动作创建者，reducer）

    import axios from "axios"

// Action Type
const SET_PROJECTS = 'SET_PROJECTS'

// Action Creator
export const setProjects = (projects) => {
    return {
        type: SET_PROJECTS,
        projects
    }


}

//Thunk Creator
export const fetchProjects = () => {
    return async (dispatch) => {
        try {
            const { data: projects } = await axios.get('/api/projects')
            console.log('here is projects -->', projects)
            dispatch(setProjects(projects));
        } catch (error) {
            console.log('Error fetching projects from server')
        }
    }
}

//initial state
// const initState = {};


//create reducer to add to redux store
export default function projectsReducer(state = [], action) {
    switch (action.type) {
        case SET_PROJECTS:
            return action.projects
        default:
            return state;
    }

}

combineReducer & 导出

    import { createStore, combineReducers, applyMiddleware } from 'redux'
import { createLogger } from 'redux-logger'
import thunkMiddleware from 'redux-thunk'
import { composeWithDevTools } from 'redux-devtools-extension'
import axios from 'axios'
// import auth from './auth'
import projectReducer from './project'
import projectsReducer from './projects'

const reducer = combineReducers({
  projects: projectsReducer,
  project: projectReducer
})
const middleware = composeWithDevTools(
  applyMiddleware(thunkMiddleware.withExtraArgument({ axios }), createLogger({ collapsed: true }))
)
const store = createStore(reducer, middleware)

export default store

** 主要路线（不确定这是否有帮助，但这些是我到目前为止的路线 **

    import React, { Component, Fragment } from 'react'
import { withRouter, Route, Switch, Redirect, Link } from 'react-router-dom'
import AllProjects from './components/AllProjects';
import { SingleProject } from './components/SingleProject'
import { connect } from 'react-redux';




/**
 * COMPONENT
 */
class Routes extends Component {

  render() {

    return (
      <div>
        <main>
          <h3>Check out my projects below:</h3>
          <Link to="/projects">Projects</Link>
        </main>
        {/* Frontend Routes */}
        <Switch>
          <Route exact path="/projects" component={AllProjects} />
          <Route exact path="/projects/:projectId" component={SingleProject} />
        </Switch>
      </div>
    )
  }
}

/**
 * CONTAINER
 */


// The `withRouter` wrapper makes sure that updates are not blocked
// when the url changes
export default withRouter(connect(null, null)(Routes))
4

0 回答 0