Reactjs 为什么渲染外部的清除函数（元素）不'；不行？

我想在父

组件

类中创建一个动态

元素

。它在函数声明中给出了

意外标记。但是，在
返回（…此处…）
中编写相同的函数是可行的。我错过了什么？

这是我的代码：

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;         

注意：在render（）中写入
{this.state.data.map（（发票）=>{return{invoice.customerNumber}}}
内部返回（…此处..）有效。
不能在
类
正文中声明变量。

您可以在函数（如渲染、构造函数、react生命周期方法、自定义函数等）内部执行此操作。

如果您想以“反应方式”进行操作，请将
ListData
作为一个组件：

例如：

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

const ListData=data=>(
{data.map（（发票）=>{invoice.customerNumber}）
); 

并像这样使用它：

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

render（）{
返回(
月日
);
}

以下是一个工作示例：


const ListData=（{data}）=>(
{data.map（（o）=>（{o}））}
);
常量应用=（）=>(
你好
);
ReactDOM.render（，document.getElementById（'root'））

这样做会导致
编译失败
错误
displayRevenue.js:at
const ListData
ie在声明常量ListData时使用了es6 arrow函数语法，这在您的环境中可能不受支持。您可以使用正常的es5语法。我将更新答案。否。我正在使用es6。
create react应用程序——版本为1.4.0。我想这是最新的。因此ES6您在哪里声明了
ListData
？我希望不是在课堂上
 render() {
    return (
      <div>
        <h3>MonthToDate</h3>
        <ListData data={this.state.data} />
      </div>
    );
  }