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（并假设您的减速器有效且正常工作）会将您的redux - 托管状态（您在减速器中保留的状态）映射到组件的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看起来像是一个不错的教程，docs总是一个好的开始。另请参阅相关问题here。

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

1 个答案: