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

我将我的项目从just React转移到React、Redux和React Redux堆栈，出现了一个错误。 在转移到这个堆栈之前，一切都正常工作。 . 我试着在三天内把它修好，但没有成功

My 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()
})

容器组件：

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

从“React”导入React
从“@fortawesome/react fontawesome”导入{FontAwesomeIcon}”；
从“@fortawesome/free solid svg icons/faBars”导入{faBars}”；
导入“/。/css/App.css”
从“/paragraphMenu”导入ParagraphOfMenu；
类MobileMenu扩展了React.Component{
渲染（道具）{
调试器
让Menu=（）=>{this.props.menuDate.map（（el，i）=>(
))}
返回(


);
}
}
导出默认移动单元

链接到代码：

---

提前感谢

代码中有很多错误：

connect

将第一个参数作为MapStateToProps，第二个参数作为MapDispatchToProps，您以错误的顺序传递它

变量

let Menu

被定义为一个函数，它应该是一个组件

Update

方法是在render方法中定义的，它应该被定义为类方法。因为你已经在那里调用了你在道具中收到的方法

---

您可以参考此工作代码：

代码中有很多错误：

connect

将第一个参数作为MapStateToProps，第二个参数作为MapDispatchToProps，您以错误的顺序传递它

变量

let Menu

被定义为一个函数，它应该是一个组件

Update

方法是在render方法中定义的，它应该被定义为类方法。因为你已经在那里调用了你在道具中收到的方法

您可以参考此工作代码：

让MobileNuContainer=连接(
MapStateTops，
MapDispatchToProps
)（机动部队）
让MobileNuContainer=连接(
MapStateTops，
MapDispatchToProps
)（机动部队）我在这段代码中发现了几个问题，因此我将向您指出它们，并希望它们能够帮助您

首先，我们来看一下：

const store = createStore(UpdateMenu, menuDate);

这样做的目的是创建一个新的存储，并使用作为参数传递的值初始化它。由于您向
createStore
函数传递了一个减速机，因此分配给
状态的值将是
菜单日期
变量中的数组

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

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

我还注意到，您使用了
组合减速器
，但最终没有使用组合减速器

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

您正在以相反的顺序传递这两个参数。正如您在中所看到的，
mapstatetops
应该是第一个参数，
mapsdispatchtoprops
应该是第二个参数

我发现的最后一个问题是
UpdateMenu
reducer本身的实现

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

我不太确定你的行动是什么意思，但是现在你的州包含了一系列的项目当动作
UpdateMenu
触发时，该数组被
false
值替换。这意味着您将丢失所有数据，因此您可能应该对此进行检查

如果不阻止这种情况发生，则在调用
map
时会出现新错误，因为在调度
updateNu
操作后，您的状态不再包含数组。reducer应该返回一个包含更新数据的新数组，以便一切都按预期工作
 我在这段代码中发现了几个问题，因此我将向您指出它们，并希望它们能帮助您

首先，我们来看一下：

const store = createStore(UpdateMenu, menuDate);

这样做的目的是创建一个新的存储，并使用作为参数传递的值初始化它。由于您向
createStore
函数传递了一个减速机，因此分配给
状态的值将是
菜单日期
变量中的数组

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

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

我还注意到，您使用了
组合减速器
，但最终没有使用组合减速器

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

你知道吗