Reactjs 如何在不使用Redux中的Provider和connect（）的情况下使用init state

全部：

我对Redux非常陌生，当我尝试初始化应用程序的状态时，我想直接将应用程序组件的

store.getState（）

提供给

this.setState（）

，但它总是给我一些错误，比如

“无法在现有状态转换期间更新（例如在

呈现中）。”

我的代码如下：

import React, { Component } from 'react'
import { createStore } from 'redux'


var headerMenuReducer = (state, action) => {
    switch (action.type) {
        case "OPEN_MENU": {
            state.data.forEach(function(menu, i){
                if(menu.id == action.id ){
                    menu.active = true;
                } else {
                    menu.active = false;
                }
            })
            return state;
        }
        case "CLOSE_MENU": {
            state.data.forEach(function(menu, i){
                menu.active = false;
            })
            return state;
        }
        default: {
            return {
                data: [
                    {
                        type: "menu",
                        title: "Views",
                        id: "menu_views",
                        active: false
                    },
                    {
                        type: "menu",
                        title: "Portfolios",
                        id: "menu_portfolios",
                        active: false
                    },
                    {
                        type: "menu",
                        title: "Factors",
                        id: "menu_factors",
                        active: false

                    },
                    {
                        type: "menu",
                        title: "Tools",
                        id: "menu_tools",
                        active: false
                    },
                    {
                        type: "link",
                        title: "Information",
                        id: "menu_infomation",
                        active: true
                    }
                ]
            }// end of return
        }
    }
}

let store = createStore(headerMenuReducer);


class App extends React.Component {
    constructor(props) {
        super(props);
        this.state = {data:[]};
        this.style={
            "padding": "0 5px"
        }
    }
    componentDidMount(){
        this.setState(store.getState());

    }
    activeMenu(id) {
        store.dispatch({
            type: "OPEN_MENU",
            id: id
        })
        this.setState( store.getState() )
    }
    render(){
        return (
            <div>
                {
                    this.state.data.map( (menu, i) => {
                        var style = Object.assign({}, this.style, {"backgroundColor": (menu.active?"lightblue": "lightpink")})
                        return <span key={menu.id} style={style} onClick={this.activeMenu(menu.id).bind(this)}>{menu.title}</span>
                    })
                }
            </div>
        )
    }
}


export default App

import React，{Component}来自“React”
从“redux”导入{createStore}
var HeaderNureEducer=（状态、操作）=>{
开关（动作类型）{
案例“打开菜单”：{
state.data.forEach（函数（菜单，i）{
if（menu.id==action.id）{
menu.active=true；
}否则{
menu.active=false；
}
})
返回状态；
}
案例“关闭菜单”：{
state.data.forEach（函数（菜单，i）{
menu.active=false；
})
返回状态；
}
默认值：{
返回{
数据：[
{
键入：“菜单”，
标题：“视图”，
id:“菜单视图”，
活动：错误
},
{
键入：“菜单”，
标题：“投资组合”，
id:“菜单”，
活动：错误
},
{
键入：“菜单”，
标题：“因素”，
id:“菜单因素”，
活动：错误
},
{
键入：“菜单”，
标题：“工具”，
id:“菜单工具”，
活动：错误
},
{
键入：“链接”，
标题：“信息”，
id:“菜单信息”，
主动：正确
}
]
}//返回结束
}
}
}
let store=createStore（headerNureEducer）；
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
this.state={data:[]}；
这是我的风格={
“填充”：“0 5px”
}
}
componentDidMount（）{
this.setState（store.getState（））；
}
活动菜单（id）{
仓库调度({
键入：“打开菜单”，
id:id
})
this.setState（store.getState（））
}
render（）{
返回(
{
this.state.data.map（（菜单，i）=>{
var style=Object.assign（{}，this.style，{“backgroundColor”：（menu.active？“lightblue”：“lightpink”）}）
返回{menu.title}
})
}
)
}
}
导出默认应用程序
问题在于此组件定义：

<span key={menu.id} style={style} onClick={this.activeMenu(menu.id).bind(this)}>{menu.title}</span>

}

（去掉样式逻辑，使示例更容易理解。）
问题在于此组件定义：

<span key={menu.id} style={style} onClick={this.activeMenu(menu.id).bind(this)}>{menu.title}</span>

}

（去掉样式逻辑，使示例更容易理解。）
这不是redux的工作原理。不过，这就是流动性。你应该考虑要么转换为磁通，然后这样做。或者将道具传递给与状态相同的组件。@JohnRuddell谢谢，这意味着我必须使用
和
connect（）
？是的，您应该使用connect将组件连接到您的商店。这是redux架构。我建议您仔细阅读一下redux及其工作原理。：）@谢谢，我会的。顺便问一下，我在reducer函数中初始化状态数据的方法正确吗？这是一个简单的例子，但有一些很好的信息：）这不是redux的工作原理。不过，这就是流动性。你应该考虑要么转换为磁通，然后这样做。或者将道具传递给与状态相同的组件。@JohnRuddell谢谢，这意味着我必须使用
和
connect（）
？是的，您应该使用connect将组件连接到您的商店。这是redux架构。我建议您仔细阅读一下redux及其工作原理。：）@谢谢，我会的。顺便问一下，我在reducer函数中初始化状态数据的方法正确吗？这是一个简单的例子，但有一些很好的信息：）谢谢。所以我应该做一些类似于
this.activeMenu.bind（this，menu.id）
，对吗？这是个愚蠢的错误……谢谢。所以我应该做一些类似于
this.activeMenu.bind（this，menu.id）
，对吗？这是多么愚蠢的错误。。。。