Question

我将项目从React转移到了React，Redux和react-redux堆栈，并发生了错误。在转移到该堆栈之前，一切工作正常。 enter image description here。我试图在3天之内修复它，但没有成功。

我的index.js：

import React from "react";
import ReactDOM from "react-dom";
import "./index.css";
import store from "./store/date";
import {BrowserRouter} from "react-router-dom";
import {Provider} from "react-redux";
import App from "./App";
const rerender=()=> {
    ReactDOM.render(
        <BrowserRouter>
            <Provider store={store}>
            <App /></Provider></BrowserRouter>, document.getElementById("root")
    );
};
rerender();
store.subscribe(()=>{
    rerender()
})

我的文件带有日期（date.js）：

import {combineReducers, createStore} from "redux";
import realtorsDate from "./realtorsDate";
let isMenuVisible = true;
const UpdateMenu = (state = isMenuVisible, action) => {
    switch (action.type) {
        case 'UpdateMenu' :
            let copystate = !state;
            return copystate;
        default :
            return state;
     }
};
let menuDate=[
    {
        Name: "Main",
        Symbol: "/",
        Src: ""
    },
    {
        Name: "logo",
        Symbol: "img",
        Src: "./../Images/logo.png"
    },
    {
        Name: "About us",
        Symbol: "#",
        Src: "about"
    },
    {
        Name: "Our team",
        Symbol: "#",
        Src: "team"
    },
    {
        Name: "Vacancies",
        Symbol: "/",
        Src: "work"
    },
    {
        Name: "Advantage",
        Symbol: "#",
        Src: "adv"
    },
    {
        Name: "Contacts",
        Symbol: "#",
        Src: "cont"
    }
]
let reducers=combineReducers({UpdateMenu,realtorsDate})
const store=createStore (UpdateMenu,menuDate);
export default store;

容器组件：

import {connect} from "react-redux";
import MobileMenu from "./menu";
let menuStateText= {
    type: "UpdateMenu"
}
let MapStateToProps=(state)=>{
    return {
        menuDate: state.menuDate}}
let MapDispatchToProps=(dispatch)=>{
    return {
        UpdateMenu: ()=> {
            dispatch (menuStateText)
        }
    }
}
let MobileMenuContainer=connect(MapDispatchToProps,MapStateToProps)(MobileMenu);
export default MobileMenuContainer

组件：

import React from "react"
import {FontAwesomeIcon} from "@fortawesome/react-fontawesome";
import {faBars} from "@fortawesome/free-solid-svg-icons/faBars";
import "./../css/App.css"
import ParagraphOfMenu from "./paragraphMenu";
class MobileMenu extends React.Component {
    render(props) {
        debugger
        let Menu =()=>{this.props.menuDate.map((el,i) => (
            <ParagraphOfMenu el={el} key={i}/>
        ))}
        return (
            <div className="mobileMenuBlock">
                <FontAwesomeIcon icon={faBars} onClick="return false"></FontAwesomeIcon>
                <header className={(this.props.UpdateMenu) ?"hidemenu":"mobilemenu"}>
                    <nav>
                        <ul className="">
                            <Menu></Menu>
                        </ul>
                    </nav>
                </header>
            </div>
        );
    }
}
export default MobileMenu

链接到代码：codesandbox

预先感谢

Answer 1

let MobileMenuContainer = connect(
  MapStateToProps,
  MapDispatchToProps
)(MobileMenu);

这是您的问题，您需要通过MapStateToProps而不是MapDispatchToProps

Answer 2

我在这段代码中发现了几个问题，因此我将向您指出，并希望它们能够为您提供帮助。

首先，看看这个：

const store = createStore(UpdateMenu, menuDate);

这是创建一个新商店并使用您作为参数传递的值对其进行初始化。由于您向createStore函数传递了一个化简器，因此分配给state的值将是您在menuDate变量中拥有的数组。

现在您无法访问state.menuDate，因为state不是对象：它包含数组本身。如果要获取该数组，则必须更新MapStateToProps方法，如下所示：

let MapStateToProps = (state) => {
    return { menuDate: state }
}

我还注意到您使用combineReducers，但最终却没有使用组合的减速器。

let reducers = combineReducers({
  UpdateMenu,
  realtorsDate
});

如果您想同时使用两者，则应通过将组合的异径管而不是createStore传递给UpdateMenu来调用。

createStore(reducers)

如果选择这样做，请记住，您创建的商店将具有以下结构：

{
  UpdateMenu: [value returned by the UpdateMenu reducer],
  realtorsDate: [value returned by the realtorsDate reducer]
}

如果要为商店应用其他结构，则必须更改传递给combineReducer的对象。这是一个示例：

combineReducers({
  post: postReducer,
  topic: topicReducer
})

您还应该查看如何致电connect：

let MobileMenuContainer=connect(MapDispatchToProps,MapStateToProps)(MobileMenu);

您正以相反的顺序传递两个参数。如您在official react-redux docs中所见，MapStateToProps应该是第一个参数，而MapDispatchToProps应该是第二个参数。

我发现的最后一个（也是最重要的）问题在于UpdateMenu减速器本身的实现。

const UpdateMenu = (state = isMenuVisible, action) => {
    switch (action.type) {
        case 'UpdateMenu' :
            let copystate = !state;
            return copystate;
        default :
            return state;
     }
};

我不确定您要执行的操作是什么，但是现在您的状态包含一系列项目。但是，触发操作UpdateMenu 时，该数组会被false值取代。这意味着您将丢失所有数据，因此您应该检查一下。

如果不能避免这种情况的发生，则在调用map时会遇到一个新错误，因为在分派UpdateMenu操作之后，您的状态不再包含数组。 reducer应该返回带有更新数据的新数组，以便一切正常进行。

Answer 3

代码中有很多错误：

connect将第一个参数作为MapStateToProps，第二个作为MapDispatchToProps，您以错误的顺序传递了该参数。
您的变量let Menu被定义为一个函数，应该是一个组件。
Update方法是在render方法中定义的，而应将其定义为类方法。由于您已经存在并调用在那里收到的props中的方法。

您可以参考以下工作代码：https://codesandbox.io/s/eager-bose-5lejz?fontsize=14&hidenavigation=1&theme=dark

如何在Redux中使用渲染解决此问题？

3 个答案: