TypeError：无法读取未定义的mapStateToProps的属性

Question

Function.mapStateToProps [as mapToProps]

  37 | const mapStateToProps = (state: AppState) => ({
> 38 |   errorMessage: state.errorRedux.errorMessage,
  39 |   error: state.errorRedux.error,
  40 | })

我不知道问题是什么。它不应该监听错误，因为我选择有条件地呈现消息。

1. 我尝试将errormessage:string undefined null设置为no成功。
2. 我尝试错误消息：“[interface”]失败。
3. 我尝试了errorMessage？：String我认为问题可能出在扩展ErrorHandlerProps接口的某个地方，但我已经扩展了MapStateToProps？

import { Dispatch, Action } from "redux"
import { connect } from "react-redux"
import { AppState } from "reducers"
import { showError } from "data/error_handler"

class ErrorHandler extends React.Component<
  ReturnType<typeof mapStateToProps> & ReturnType<typeof mapDispatchToProps>
> {
  public render() {
    const { onShowError, error, errorMessage } = this.props

    let showTheError =
      this.props.error === true ? (
        <Snackbar
          open={error}
          message={errorMessage}
          autoHideDuration={5000}
        />
      ) : null

    return (
      <div>
        <RaisedButton onClick={onShowError} label="Toggle ErrorHandler" />
        {showTheError}
      </div>
    )
  }
}

const mapStateToProps = (state: AppState) => ({
  errorMessage: state.errorRedux.errorMessage,
  error: state.errorRedux.error,
})

const mapDispatchToProps = (dispatch: Dispatch<Action>) => {
  return {
    onShowError: () => dispatch(showError()),
  }
}

export default connect(
  mapStateToProps,
  mapDispatchToProps
)(ErrorHandler)

data/interfaces.ts

export interface ErrorHandlerProps {
  error: boolean
  errorMessage: string
}

import { ErrorHandlerProps, ActionTypes } from "./"

const initialState: ErrorHandlerProps = {
  error: false,
  errorMessage: "",
}

export default (
  state: ErrorHandlerProps = initialState,
  action: ActionTypes
) => {
  switch (action.type) {
    case "SHOW_ERROR":
      return {
        ...state,
      }
    default:
      return state
  }
}

import { reducer as errorHandler, ErrorHandlerProps } from "data/error_handler"

const appReducer = combineReducers({
  errorHandler
} as any)

export type AppState = {
  errorRedux: ErrorHandlerProps
}

import { createStore, applyMiddleware, compose } from "redux"
import { routerMiddleware } from "react-router-redux"
import thunk from "redux-thunk"
import rootReducer, { AppState } from "reducers"

const initialState = {}
const middleware = [thunk, routerMiddleware(history)]
const composedEnhancers = compose(applyMiddleware(...middleware), ...enhancers)
const store = createStore(rootReducer, initialState, composedEnhancers)

export default store
export const getState = () => store.getState() as AppState

Answer 1

如果我们能看到你是如何创建你的商店的，那就更容易了。

通常在使用CommineDeducers时会出现此问题，因为它创建了一个reducers对象，而这是MapStateToprops接收的内容，而不是直接接收状态。

import { createStore, combineReducers } from "redux";
import testReducer from "./reducer";
import testReducer2 from "./reducer2";

// ----
// using combine reducers will make the state in mapStateToProps to be an object of all the reducers combined, so you have to access it like state.testReducer.value or state.testReducer2.value

const rootReducer = combineReducers({
  testReducer,
  testReducer2
});
// ----

// ----
// while passing a reducer directly will not have the same effect and the state will be accessible like state.value in mapStateToProps

const rootReducer = testReducer;
// ----

const store = createStore(rootReducer);

export default store;

请参见以下沙箱:https://codesandbox.io/s/k3ojkqxy57