React-Redux 错误：“可见”未定义

Question

我正在尝试实现来自https://react.semantic-ui.com/modules/sidebar/#types-sidebar 的侧边栏功能。但我仍然收到未定义的“可见”错误。我想在禁用时将映射状态传递给从索引到按钮上的 navbar.js 的“可见”道具。

所以我创建了一个reducer 'reducers/App.js'：

    import {
      HIDE_CLICK,
      SHOW_CLICK,
      HIDE_SIDE_BAR,
    } from "../actions/app";

    const initialState = {
      visible: false
    };

    const appReducer = (state = initialState, {type}) => {
      switch(type) {
        case HIDE_CLICK:
          return {
            ...state,
            visible: false,
          }
        case SHOW_CLICK:
          return{
            ...state,
            visible: true,
          }
        case HIDE_SIDE_BAR:
          return {
            ...state,
            visible: false,
          }
      };
    }

    export default appReducer;

然后它的动作'action/App.js'：

    export const HIDE_CLICK = "HIDE_CLICK";
    export const SHOW_CLICK = "SHOW_CLICK";
    export const HIDE_SIDE_BAR = "HIDE_SIDE_BAR";

    export const handleHideClick = () => ({
      type: HIDE_CLICK,
    })

    export const handleShowClick = () => ({
      type: SHOW_CLICK,
    })

    export const handleSideBarHide = () => ({
      type: HIDE_SIDE_BAR,
    })

现在我的组件包含：'NavBar/index.js'

    import { connect } from "react-redux";
    import NavBar from "./NavBar";

    import { handleHideClick, handleShowClick, handleSideBarHide } from "../../redux/actions/app";

    /* istanbul ignore next */
    const mapStateToProps = state => ({
      isAuthenticated: state.authentication.authenticated,
      visible: state.app.visible
    });

    const mapDispatchToProps = (dispatch) => {
      return{
        handleHideClick: () => dispatch(handleHideClick),
        handleShowClick: () => dispatch(handleShowClick),
        handleSideBarHide: () => dispatch(handleSideBarHide)
      }
    };

    export default connect(
      mapStateToProps,
      mapDispatchToProps,
    )(NavBar);

还有我的“NavBar/NavBar.js”

    import React from "react";
    import PropTypes from "prop-types";
    import { Link } from "react-router-dom";
    import { Container, Menu, Button, Sidebar,Segment, Icon, Header, Image } from "semantic-ui-react";

    export const ShowSideBar = ({
      handleShowClick,
      handleHideClick,
      handleSideBarHide
    }) => (
        <div>
          <Button.Group>
            <Button disabled={visible} onClick={handleShowClick}>
              Show sidebar
            </Button>
            <Button disabled={!visible} onClick={handleHideClick}>
              Hide sidebar
            </Button>
          </Button.Group>

          <Sidebar.Pushable as={Segment}>
            <Sidebar
              as={Menu}
              animation='overlay'
              icon='labeled'
              inverted
              onHide={handleSideBarHide}
              vertical
              visible={visible}
              width='thin'
            >
    ...

)

最后在我的根 reducer 上定义了 app reducer：

    import { combineReducers } from "redux";

    import authentication from "./authentication";
    import app from "./app";

    const rootReducer = combineReducers({
      authentication,
      app
    });

    export default rootReducer;

Answer 1

你需要列出你需要的所有道具，或者不要解构它们：

export const ShowSideBar = ({
  handleShowClick,
  handleHideClick,
  handleSideBarHide,
  visible
}) => (
  ....
)

或export const ShowSideBar = (props) => (...) 并使用props. 访问所有内容