Question

我想在父Element类中创建一个动态Component。它在函数声明中给出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"
    },

注意：在render（）中返回（.. here ..）内部写{this.state.data.map((invoice) => {return <div>{invoice.customerNumber}</div>})}。

Answer 1

您无法在class正文中声明变量您可以在内部函数中执行此操作（例如渲染，构造函数，反应生命周期方法，自定义函数等...）如果你想这样做，那么＆＃34;做出反应的方式＆＃34;将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>
    );
  }

这是一个有效的例子：

＆＃13;

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'));

＆＃13;

<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>

＆＃13;

为什么在渲染之外去掉函数（元素）并不起作用？

1 个答案: