Git Product home page Git Product logo

Comments (4)

MuYunyun avatar MuYunyun commented on May 11, 2024

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

from reactspa.

xulayen avatar xulayen commented on May 11, 2024
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的问题吗

from reactspa.

MuYunyun avatar MuYunyun commented on May 11, 2024

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

from reactspa.

MuYunyun avatar MuYunyun commented on May 11, 2024

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

from reactspa.

Related Issues (20)

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.