Question

我一直在抨击我试图玩这个。我的道具并没有在redux中连接。这是我的错误

VM803:36 Warning: Failed prop type: The prop `apiData` is marked as required 
in `TestApiPage`, but its value is `undefined`.
in TestApiPage (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in Provider (created by Root)
in Root
in AppContainer
VM803:36 Warning: Failed prop type: The prop `actions` is marked as required 
in `TestApiPage`, but its value is `undefined`.
in TestApiPage (created by RouterContext)
in RouterContext (created by Router)
in Router (created by Root)
in Provider (created by Root)
in Root
in AppContainer

这是我的代码 TestApiPage

import React from 'react';
import PropTypes from 'prop-types';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as actions from '../actions/testApiActions';
import {TestApiForm} from '../components/TestApi';

export const TestApiPage = (props) => {
    console.log(props);
  return (
    <TestApiForm
    apiData={props.apiData}

/>
);
};

TestApiPage.propTypes = {
  actions: PropTypes.object.isRequired,
  apiData: PropTypes.object.isRequired
};

function mapStateToProps(state) {
  return {
    apiData: state.apiData 
  };
}

function mapDispatchToProps(dispatch) {
  return {
    actions: bindActionCreators(actions, dispatch)
  };
}
    export default connect(
  mapStateToProps,
  mapDispatchToProps
)(TestApiPage);

testApiActions

export function callTestApiAction() {
return function (dispatch) {
return dispatch({
  type: types.CALL_TEST_API,
  message: "blah",

});
 };
}

testApiReducer

import {CALL_TEST_API} from '../constants/actionTypes';
import objectAssign from 'object-assign';
import initialState from './initialState';

export function testApiReducer(state = initialState.apiData, action) {

  switch (action.type) {
    case CALL_TEST_API:

      return objectAssign({}, state, {message: action.message});
    default:
      return state;
  }
}

的初始化状态

export default {

   apiData: {
        message: "You haven't called your api yet! :("
    }
};

当我使用Redux开发工具时，我确实在那里看到我的状态并登录连接显示它正在工作。不知道发生了什么事。有线索吗？

Answer 1

所以你的问题是你的初始状态是apiData的内容，而不是包含apiData的对象。

换句话说，您将状态对象设置为apiData：

export function testApiReducer(state = initialState.apiData, action) {
//                                     ^ here you set state = apiData
}

但是你想要将apiData提取为状态属性：

function mapStateToProps(state) {
  return {
    apiData: state.apiData 
    //       ^ but here you expect state.apiData
  };
}

更改缩减器以使用整个初始状态：

// here's your reducer if your state is `{ apiData }`
export function testApiReducer(state = initialState, action) {
//                                     ^ use only initialState here
  switch (action.type) {
    case CALL_TEST_API:

      // make sure you properly update the internal `apiData` part of the state
      return objectAssign({}, state, {
        apiData: Object.assign({}, state.apiData, {
          message: action.message
        });
    default:
      return state;
  }
}

或者更改state.apiData只使用state的任何地方。

redux需要proptypes undefined

1 个答案: