如何使用初始化状态，而无需使用供应商，并Redux的连接（）

Question

所有：

我非常新的终极版，当我尝试初始化应用程序的状态，我想直接给store.getState()到this.setState()的应用程序组件，但它不断给我一些错误，如

“在现有状态转换期间不能更新（如render）”。

我的代码是这样的：

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 

Answer 1

问题就出在这个组件定义：

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

你调用activeMenu()在渲染时间。我的猜测是你想在点击时间调用它。

为此，我建议制作span自己的组件，并在其内部调用传递的prop回调 - 相应地传递特定的id。

事情是这样的：

const MenuButton = ({ id, title, onClick}) => (
    <span key={id} onClick={() => { onClick(id) }>{title}</span> 
); 

class App extends React.Component { 
    constructor(props) { 
     //... 
    }, 
    activeMenu(id) { 
     //... 
    }, 
    render() { 
     const menuButtons = this.state.data.map((menu, i) => { 
      return <MenuButton id={menu.id} title={menu.title} onClick={this.activeMenu}> 
     }); 

     return (
      <div> 
       {menuButtons} 
      </div> 
     ) 
} 

}

（掏出自己的风格逻辑来使例子更容易理解。）