@connect 的问题

[StarksJohn]

你好啊大神 ,我 在 拜读 你的 https://github.com/MuYunyun/reactSPA 项目, 看到用 了
@connect
语法, 我项目里也是 yarn eject 之后 , 也用了这个语法 ,但是 我 npm run build 时就报错了,

然后 我 npm i react-scripts --save-dev 重新装回 react-scripts 这个库后, package.json里的 build 脚本 改成 "build": "react-scripts build",
这下 就 看到
是 @connect 的错误, 你的项目 是 怎么配置的啊, 我看你的项目 可以 build 成功啊

[MuYunyun]

@cham1985 因为 @ 是ES7 的 decorator(装饰器) 语法，直接使用必然无效，所以我在项目使用了transform-decorators-legacy 模块， 配置代码 ，除了这个模块外，我觉得直接使用 babel-preset-env 也应该可以的，有时间的话我会试试。

[xulayen]

import React from 'react'
import SearchBar from 'components/searchbar'
import Table from 'components/table'
import 'whatwg-fetch'
import moment from 'moment'
import { Button, message, Modal } from 'antd'
import { FormModal } from 'components/modalForm'
import { musicKindList, languageKindList, publishCountry } from '../../utils/config'
import { fetchStoreList } from 'actions/store'
import { connect } from 'react-redux'
import './index.less'

require('es6-promise').polyfill();


const confirm = Modal.confirm
@connect(
    (state) => ({
        storeList: state.storeList,
    })
)

export default class Store extends React.Component {
    constructor(props) {
        super(props)
        this.state = {
            tData: [],
            item: {},
            loading: true,
            modalShow: false,
            modalShowEdit: false,
        }
    }

    componentWillMount(){

    }

    componentDidMount() {
        fetchStoreList({ 
            method: 'baidu.ting.billboard.billList',
            size: 100,
            type: 2,
        })(this.props.dispatch)
    }

    /**
     * 表头
     */
    tableHeader = () => {
        return [{
            dataIndex: 'title',
            title: '歌曲名',
            width: 200,
        }, {
            dataIndex: 'author',
            title: '歌手',
            width: 200,
        }, {
            dataIndex: 'country',
            title: '发行国家',
            width: 200,
        }, {
            dataIndex: 'language',
            title: '语种',
            width: 200,
        }, {
            dataIndex: 'publishtime',
            title: '发行时间',
            width: 200,
        }, ]
    }


    render(){
        const { storeList } = this.props

        console.log(this.props)

        const resultArray = []

        let tempList = storeList.data

        if(tempList) {
            for (let i = 0; i < tempList.length; i++) {
                resultArray.push({
                    title: tempList[i].title,
                    author: tempList[i].author,
                    country: tempList[i].country,
                    language: tempList[i].language,
                    publishtime: tempList[i].publishtime,
                })
            }
        }
        return(
            
            <div id="wrap">
                <div className="tableBox">
                    <Button onClick={this.add} className="addButton">添加</Button>
                    <div style={{ paddingTop: 43 }}>
                        <Table
    
                            pagination={ true }
                            pageSize={10}
                            header={ this.tableHeader() }
                            data={ resultArray }
                            loading={ storeList.loading }
                            scroll={{y: 385 }}
                        />
                    </div>
                </div>
            </div>
        )    
    }


}

这个一直提示我 Cannot read property 'data' of undefined，是connection的问题吗

[MuYunyun]

@xulayen reducer 中将 storeList 默认值设置为 {} 就可以了

[MuYunyun]

@connect 的用法实质是装饰器的用法，可以看 JS 装饰器解析