当我将组件从无状态转换为有状态时，没有及时读取数据；

Question

所以首先我有一个无状态组件，数据可以很好地及时读取，然后当我需要将它转换为有状态组件时，由于某种原因它无法正常工作应该。它使该组件的数据为空。它甚至不显示 Wait... 字符串。这是我当前的组件：

class ItemGroupComponent extends Component {

    constructor(props){
        super(props);
        this.state = {
            userShortcutAreLoading: false,
            labelnameDefinition: [],
            labelnamesAreloading: false,
            itemGroupDefinition: [],
            itemGroupIsLoading: false
        }
    }

    componentDidMount(){
        this.setState({
            userShortcutAreLoading: this.props.userShortcutAreLoading,
            labelnameDefinition: this.props.labelnameDefinition,
            labelnamesAreloading: this.props.labelnamesAreloading,
            itemGroupDefinition: this.props.itemGroupDefinition,
            itemGroupIsLoading: this.props.itemGroupIsLoading
        })
    }

    loadData(e, item){
        console.log(e);
        console.log(item);

    }

    render(){

        if(this.state.labelnamesAreloading === true && this.state.itemGroupIsLoading === true){
            return (<h1> Wait... </h1>) //it doesn't even show the wait...
        }

        console.log("ITEM GROUP");
        console.log(this.state.itemGroupDefinition); //this is always empty
        return (
            <Button ui="button1" arrow={false} ripple={false} iconCls="icon-settings" border={false} >
                <Menu title={this.state.labelnameDefinition['settings.tab.title']} ui='headerMenu'>
                    {this.state.itemGroupDefinition.map((item) =>
                        <MenuItem key={item.id} iconCls={item.iconCls} text={item.name} ui="menuItem1" handler={() => this.loadData}/>
                    )}
                </Menu>
            </Button>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userShortcutAreLoading: state.coreuireducer.userShortcutAreLoading,
        labelnameDefinition: state.coreuireducer.labelnameDefinition,
        labelnamesAreloading: state.coreuireducer.labelnamesAreloading,
        itemGroupDefinition: state.coreuireducer.itemGroupDefinition,
        itemGroupIsLoading: state.coreuireducer.itemGroupIsLoading
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(itemGroupAction, dispatch)
    }
};


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

-调用ItemGroupComponent的部分代码：

<NavItem className="d-md-down-none ">
    {/*Search menu*/}
    <NavLink href="#" data-toggle="tooltip" title="Settings">{/*<i className="icon-settings"></i>*/}
      <ItemGroupComponent />
    </NavLink>
</NavItem>

Answer 1

当使用 redux 时，您不使用正常的 react 状态模式。使用 mapStateToProps（并假设你的 reducer 有效且工作）会将你的 redux 管理状态（你在你的 reducer 中维护）映射到你的组件的 props。所以你想要的更像是：

class ItemGroupComponent extends Component {

    loadData(e, item){
        console.log(e);
        console.log(item);

    }

    render(){
        const { // destructuring this.props, which now contains your state and is managed using redux
          userShortcutAreLoading,
          labelnameDefinition,
          labelnamesAreloading,
          itemGroupDefinition,
          itemGroupIsLoading
        } = this.props;
        if(labelnamesAreloading === true && itemGroupIsLoading === true){
            return (<h1> Wait... </h1>) //it doesn't even show the wait...
        }

        console.log("ITEM GROUP");
        console.log(itemGroupDefinition); //this is always empty
        return (
            <Button ui="button1" arrow={false} ripple={false} iconCls="icon-settings" border={false} >
                <Menu title={labelnameDefinition['settings.tab.title']} ui='headerMenu'>
                    {itemGroupDefinition.map((item) =>
                        <MenuItem key={item.id} iconCls={item.iconCls} text={item.name} ui="menuItem1" handler={() => this.loadData}/>
                    )}
                </Menu>
            </Button>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        userShortcutAreLoading: state.coreuireducer.userShortcutAreLoading,
        labelnameDefinition: state.coreuireducer.labelnameDefinition,
        labelnamesAreloading: state.coreuireducer.labelnamesAreloading,
        itemGroupDefinition: state.coreuireducer.itemGroupDefinition,
        itemGroupIsLoading: state.coreuireducer.itemGroupIsLoading
    }
};


const mapDispatchToProps = (dispatch) => {
    return {
        actions: bindActionCreators(itemGroupAction, dispatch)
    }
};


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

您可能想多读一些关于 redux 的内容，因为您似乎对它的工作原理或实现方式有误解。我认为 this looks like a decent tutorial, and the docs are always a good place to start. Also see a related question .

当我将组件从无状态转换为有状态时，没有及时读取数据；

When I convert component from stateless to statefull, data is not read in time;

javascript

extjs

reactjs

react-redux

extreact