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

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 中维护)映射到组件的 Prop 。所以你想要的更像是:

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看起来像是一个不错的教程，并且 docs总是一个好的起点。另请参阅相关问题 here .