Question

我有一个react-redux动作创建问题。当我在生命周期方法componentDidMount（）

中记录道具时，我的道具是一个空对象

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { fetchSurveys } from '../../actions/index';

export class SurveyList extends Component {
 componentDidMount() {
   console.log(this.props);
   this.props.fetchSurveys();
 }

  renderSurveys() {
    return (
   this.props.surveys.length &&
    this.props.surveys.map(survey => {
     return (
       <div className="card blue-grey darken-1" key={survey._id}>
         <div className="card-content">
           <span className="card-title">{survey.title}</span>
           <p>{survey.body}</p>
           <p className="right">
             Sent On: {new Date(survey.dateSent).toLocaleDateString()}
           </p>
          </div>
          <div className="card-action">
            <a>Yes: {survey.yes}</a>
            <a>No: {survey.no}</a>
          </div>
        </div>
      );
    })
  );
}

 render() {
  return <div>{this.renderSurveys()}</div>;
  }
}

function mapStateToProps({ surveys }) {
 return { surveys };
 }

  export default connect(mapStateToProps, { fetchSurveys })(SurveyList);

现在根据react-redux文档默认情况下，dispatch包含在props中，所以我们不需要在connect方法中显式调用mapDispatchToProps来命中我们的动作创建者。 fetchSurveys（）是一个动作创建者，我希望它返回一个我随后渲染的调查列表。

然而this.props = {};所以当然我不能在renderSurveys（）上调用.map on undefined，因为我也没有在props上获得调查属性。

我真的很困惑为什么我的道具是空的。任何人都可以对这个问题有所了解，我将非常感激。我尝试过使用bindActionCreators并拥有自己的mapDispatchToProps方法，但这也不起作用。

以下是我的行动。

import axios from 'axios';
import { FETCH_USER, FETCH_SURVEYS } from './types';

export const fetchUser = () => async dispatch => {
  const res = await axios.get('/api/current_user');

 dispatch({ type: FETCH_USER, payload: res.data });
 };

export const handleToken = token => async dispatch => {
  const res = await axios.post('/api/stripe', token);
  dispatch({ type: FETCH_USER, payload: res.data });
};

export const submitSurvey = (values, history) => async dispatch => {
 const res = await axios.post('/api/surveys', values);

 history.push('/surveys');
 dispatch({ type: FETCH_USER, payload: res.data });
};

export const fetchSurveys = () => async dispatch => {
 console.log('called');
 const res = await axios.get('/api/surveys');

 dispatch({ type: FETCH_SURVEYS, payload: res.data });
};

我的调查减速机 -

import { FETCH_SURVEYS } from '../actions/types';

export default function(state = [], action) {
  switch (action.type) {
    case FETCH_SURVEYS:
      return action.payload;
    default:
      return state;
  }
}

控制台中的道具 -

组合减速机 -

import { combineReducers } from 'redux';
import authReducer from './authReducer';
import { reducer as reduxForm } from 'redux-form';
import surveysReducer from './surveysReducer';

export default combineReducers({
 auth: authReducer,
 form: reduxForm,
 surveys: surveysReducer
});

Answer 1

只是在链接中看到了您的代码。在Dashboard.js

应该不是

import { SurveyList } from './surveys/SurveyList';

是

import SurveyList from './surveys/SurveyList';

由于连接组件是默认导出的？

Answer 2

您是否在combineReducers中使用过reducer？你应该在reducers文件夹中有一个index.js文件（例如），它有类似这样的东西：

import {myreducer} from './myreducer';

const rootReducer = combineReducers(
    {
        myreducer: myreducer
    }
);

export default rootReducer;

你在某个地方有完整的代码库吗？看起来问题不在提供的代码中..

Answer 3

似乎您忘记将reducer添加到主Reducer文件中。

所以，这取决于你的代码应该是：

// reducers/index.js

import { combineReducers } from 'redux';
import surveys from './surveysReducer';

const rootReducer = combineReducers({
    surveys,
});

export default rootReducer;

希望它会有所帮助。

用connect（）无法将调度挂载到道具

3 个答案: