为什么declearing函数（Element）外渲染不起作用？

Question

我想在父类Component类中创建一个动态Element。它在函数声明时给出Unexpected token。但是在return(..here..)作品里写同样的功能。我错过了什么？
这是我的代码：

import React, { Component } from 'react'; 
import '../App.css'; 
var axios = require('axios'); 

class DisplayRevenue extends Component { 

    constructor(props){ 
    super(props); 
    this.state = { data:[] } 
    } 
    componentWillMount() { 
    this.loadRevenue(this.props.url, this.props.token); 
} 

    setData(data){ 
    this.setState(data:data); 
    console.log(this.state.data); //this gives output as json object 
    } 

    loadRevenue(url,token){ 
    axios({ 
     method:'get', 
     url:url, 
     headers: { 
     Authorization: `Bearer ${token}`, 
     }, 
    }) 
    .then((response) => { 
    // console.log(response.data); 
     this.setData(response.data); 
    }) 
    .catch(function (error) { 
     console.log("Error in loading Revenue "+error); 
    }); 
    } 

    var ListData = this.state.data.map((invoice) => {return <div>{invoice.customerNumber}</div>}) 
//above function gives error 

    render() { 
    //var listData = this.state.data.map((invoice) => (<div>{invoice.customerNumber}</div>) 
    return (
     <div> 
     <h3>MonthToDate</h3> 
      {this.state.data.map((invoice) => {return <div>{invoice.customerNumber}</div>})} 
     </div> 
    ); 
    } 
} 

export default DisplayRevenue;   

我JSON对象数组如下：

"data": [ 
    { 
     "customerId": 0, 
     "customerNumber": "IT8SDS", 
     "customerType": "RVN", 
     "invoiceType": "LBR", 
     "invoiceAmt": "52651.2287", 
     "invoiceStatus": "BILLED", 
     "invoiceDate": "2016-12-30T00:00:00.000Z" 
    }, 
    { 
     "customerId": 1, 
     "customerNumber": "DC0WTY", 
     "customerType": "RVN", 
     "invoiceType": "RNT", 
     "invoiceAmt": "198503.1828", 
     "invoiceStatus": "BILLED", 
     "invoiceDate": "2016-12-30T00:00:00.000Z" 
    }, 
    { 
     "customerId": 2, 
     "customerNumber": "LK8MD5", 
     "customerType": "INT", 
     "invoiceType": "EQT", 
     "invoiceAmt": "-6833.70721", 
     "invoiceStatus": "PENDING", 
     "invoiceDate": "2016-12-30T00:00:00.000Z" 
    }, 
    { 
     "customerId": 3, 
     "customerNumber": "E03PTJ", 
     "customerType": "PCT", 
     "invoiceType": "PTS", 
     "invoiceAmt": "55670.17911", 
     "invoiceStatus": "BILLED", 
     "invoiceDate": "2016-12-19T00:00:00.000Z" 
    }, 

注：写作{this.state.data.map((invoice) => {return <div>{invoice.customerNumber}</div>})}内部回报率（..在这里..）在渲染（）的作品。

Answer 1

您不能在class正文中声明变量。
你可以在函数内部（比如渲染，构造函数，反应生命周期方法，自定义函数等等）做到这一点。
如果你想这样做的“反应的方式”使ListData作为一个组件：
例子：

const ListData = data => (
    <div> 
    {data.map((invoice) => <div>{invoice.customerNumber}</div>)} 
    </div> 
); 

并使用它像这样：

render() { 
    return (
     <div> 
     <h3>MonthToDate</h3> 
     <ListData data={this.state.data} /> 
     </div> 
    ); 
    } 

这里是一个工作示例：

const ListData = ({data}) => (
 
    <div> 
 
    {data.map((o) => (<div>{o}</div>))} 
 
    </div> 
 
); 
 

 
const App =() => (
 
    <div> 
 
    <h2>Hello</h2> 
 
    <ListData data={["Hi", "i'm", "a", "test"]} /> 
 
    </div> 
 
); 
 

 
ReactDOM.render(<App />, document.getElementById('root'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script> 
 
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script> 
 
<div id="root"></div>