Javascript redux所需的proptypes未定义

我一直在试图玩弄这个把戏，这让我头疼不已。由于某种原因，我的道具在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

这是我的密码 测试管道

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

遗嘱执行人

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开发工具时，我确实可以在那里看到我的状态，并在connect中显示它正在工作。不知道发生了什么事。有什么线索吗？

所以您的问题是您的初始状态是

apiData

的内容，而不是包含

apiData

的对象

换句话说，您将state对象设置为等于apiData：

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

但您希望提取

apiData

作为state的属性：

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

，因此您的问题是初始状态是

apiData

的内容，而不是包含

apiData

的对象

换句话说，您将state对象设置为等于apiData：

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

但您希望提取

apiData

作为state的属性：

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

---

或者在任何地方更改

状态。apiData

仅使用

状态

您是否使用提供程序将组件与Store打包是的，我是的，您是否使用提供程序将组件与Store打包是的，我是derp，很好。做了改变，但我仍然有相同的error@PeterKarman查看我的编辑，您对Object.assign的使用也需要

apiData

而不是

{apiData}

hrm仍然不走运”导出函数testApiReducer（state=initialState，action）{switch（action.type）{case CALL\u TEST\u API:return objectAssign({}，state，{apiData:Object.assign（{}，state.apiData，{message:action.message}）}）；default:return state；}}仍然是相同的错误？？？您确定所有代码都重新编译/重新构建了吗？您应该放置一个断点（或

console.log

）无论你在何处访问该州，都可以看到它在何处中断。是的。继续并重新启动了npm，以防hmr出现问题。webpack或ESLinderp没有报告错误。很好。进行了更改，但我仍然有相同的错误error@PeterKarman请查看我的编辑，您对Object.assign的使用也应改为使用

apiData

{apiData}

hrm仍然不走运”导出函数testApiReducer（state=initialState，action）{switch（action.type）{case CALL\u TEST\u API:return objectAssign（{}，state，{apiData:Object.assign（{}，state.apiData，{message action.message}）}）；默认值：return state；}“仍然是相同的错误？？？您确定所有代码都重新编译/重新构建了所有内容吗？您应该在访问状态的任何地方放置一个断点（或

console.log

），并查看它在何处中断yep是的。继续并重新启动npm，以防hmr出现问题。webpack或eslint未报告任何错误。”