git address https://gitee.com/ChuanChuan3.
git http download: https://gitee.com/ChuanChuan3.
ssh: git@gitee.com:ChuanChuan3/ReactBase.git

Code

import React,{ Component } from "react";
import {CSSTransition } from "react-transition-group";
import {actionCreators} from "./store";

import {connect} from "react-redux"
import {
    HeaderWrapper,
    Logo,
    Nav,
    NavItem,
    SearchWrapper,
    NavSearch,
    SearchInfo,
    SearchInfoTitle,
    SearchInfoSwitch,
    SearchInfoList,
    SearchInfoItem,
    Addition,
    Button
} from "./style";

class Header extends Component {


    isArray(object) {
        return object && typeof object === "object" &&
            typeof object.length === "number" &&
            typeof object.splice === "function" &&
            //length  false  
            !(object.propertyIsEnumerable("length"));
    }

    getListArea() {
        var flag = false
        const newList = this.props.list.toJS();
        if (this.isArray(this.props.list) === true) {
            flag = true
        }
        console.log(flag, this.props.list, "this.props.list", newList)
        if (this.props.focused && !flag) {
            return(
                <SearchInfo>
                    <SearchInfoTitle>
                        
                        <SearchInfoSwitch></SearchInfoSwitch>
                    </SearchInfoTitle>
                    <SearchInfoList>
                        {/* {
                            this.props.list.map((item) => {
                                return <SearchInfoItem key={item}>{item}</SearchInfoItem>
                            })
                        } */}
                         <SearchInfoItem>{this.props.list.size}</SearchInfoItem>
                         <SearchInfoItem>{this.props.list._capacity}</SearchInfoItem>
                         <SearchInfoItem>{this.props.list._origin}</SearchInfoItem>
                         <SearchInfoItem>{this.props.list._level}</SearchInfoItem>
                    </SearchInfoList>
                </SearchInfo>
            )
        }else{
            return null;
        }
    }

    render() {
        return(
            <HeaderWrapper>
                    <Logo /> 
                        <Nav>
                            <NavItem className="left active"></NavItem>
                            <NavItem className="left">APP</NavItem>
                            <NavItem className="right"></NavItem>
                            <NavItem className="right">
                                <i className="iconfont"></i>
                            </NavItem>
                            <SearchWrapper>
                                <CSSTransition
                                    in={this.props.focused}
                                    timeout={200}
                                    classNames="slide">

                                    <NavSearch
                                        className={this.props.focused ? "focused": ""}
                                        onFocus={this.props.handleInputFocus}
                                        onBlur={this.props.handleInputBlur}
                                    ></NavSearch>

                                </CSSTransition>
                                
                                <i className = {
                                    this.props.focused ? "focused iconfont zoom" : "iconfont zoom"
                                }>
                                    
                                </i>
                                {this.getListArea()}
                            </SearchWrapper>

                        </Nav>
                        <Addition>
                            <Button className="writting">
                                <i className="iconfont"></i>
                                
                            </Button>
                            <Button className="reg"></Button>
                        </Addition>
                        
                </HeaderWrapper>
                    
        )
    }
}

// const Header = (this.props) => {
//     return(
        
//     )

// }

const mapStateToProps = (state) =>{
    return {
        focused: state.getIn(["header", "focused"]),
        list: state.getIn(["header", "list"])
        // focused: state.get("header").get("focused")
    }
}

const mapDispathToProps = (dispatch) => {
    return {

        handleInputFocus() {
           dispatch(actionCreators.searchFocus())
            dispatch(actionCreators.getList());

        },

        handleInputBlur() {
            dispatch(actionCreators.searchBlur())
        }
    }
}

export default connect(mapStateToProps,mapDispathToProps)(Header);

but when focusing, no data can be obtained