Question

我定义了这个状态：

 constructor(props){
        super(props);

        this.state = {
            open: false,
            customers:[],
            customer:{},
            products:[],
            product:{},
            orders:[],
            order:{},
            newForm:true,
            phoneNumbererror:null,
            shop:this.props.salon,
            value:'a',
            showTab:'none',
            slideIndex: 0,

        };
    }

使用包含fetch的以下函数，我收到一个带有responseData的对象数组。

getHistory(){
        console.log("Log antes del fetch de customer id");
        console.log(this.state.customer._id);
        fetch(
            DOMAIN+'/api/orders/customer/'+this.state.customer._id, {
                method: 'get',
                dataType: 'json',
                headers: {
                    'Accept': 'application/json',
                    'Content-Type': 'application/json',
                    'Authorization':'Bearer '+this.props.token
                }
            })
            .then((response) =>
            {
                return response.json();
            })
            .then((responseData) => {
                let orders = responseData.map((order) => {
                    return order.orderStatusChange ? Object.assign({}, order, {
                        status: order.orderStatusChange[0].status
                    }) : order;
                });
                this.setState({orders:orders});
                console.log("Log del responseData");
                console.log(responseData);
                console.log(responseData.orderStatusChange[0]);

            })
            .catch(function() {
                console.log("error");
            });
    }

在handleCellClick中调用此函数，我在其中传递来自使用者的一些数据，例如ID：

handleCellClick(y,x,row){
        this.setState({
            open:true,
            slideIndex: 0,
            newForm:false,
            customer:{...row}
        });
        this.getProfiles();
        this.getHistory();

    }

从fetch中获取并保存在this.state.orders内的JSON对象如下所示：

(29) [{…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}, {…}]
0:
created:"2017-07-06T15:58:07.958Z"
customer:"59561f3f1d178e1966142ad7"
lastModified:"2017-07-06T15:58:07.958Z"
orderList:[]
orderStatusChange:Array(1)
0:{status: "5", comments: "Creado en back antes de pagar", _id: "595e5e0f60fbf65149916b7c", created: "2017-07-06T15:58:07.958Z"}
length:1
__proto__:Array(0)
shop:"59108159bc3fc645704ba508"
totalAmount:4000
__v:0
_id:"595e5e0f60fbf65149916b7b"
__proto__:Object

如前面提到的那样，使用此行this.setState({orders:responseData})我可以将orders传递到我想要显示ID，日期，状态和价格的表格：

<DataTables
     height={'auto'}
     selectable={false}
     showRowHover={true}
     columns={HISTORY_TABLE_COLUMNS}
     data={this.state.orders}
     showCheckboxes={false}
     rowSizeLabel="Filas por página"
         />

名为：

    const HISTORY_TABLE_COLUMNS = [
    {
        key: '_id',
        label: 'Número de pedido',
        style:{width: '37%'}
    }, {
        key: 'created',
        label: 'Fecha del pedido',
        style:{width: '33%'}
    }, {
        key: 'status',
        label: 'Estado',
        style:{width: '13%'}
    }, {
        key: 'totalAmount',
        label: 'Total',
        style:{width: '17%'}
    }
];

如何格式化价格（totalAmount）以获得2位小数并在其旁边打印€符号？

CAPTURE FOR BETTER UNDERSTANDING

Answer 1

在表格中迭代数据时，请执行以下操作。

totalAmount.toFixed(2) + " €"

<强>更新我建议这个更改应该从后端完成，但是现在你可以在map迭代器中处理它，你可以在其中设置如下命令

const currencyToAppend = ' €';

    let orders = responseData.map((order) => {
        return order.orderStatusChange ? Object.assign({}, order, {
          status: order.orderStatusChange[0].status
        },{
            totalAmount: order.totalAmount.toFixed(2) + currencyToAppend
        }) : Object.assign({}, order, {
            totalAmount: order.totalAmount.toFixed(2) + currencyToAppend
        });
    });

我希望这能解决你的问题。

Answer 2

此解决方案适用于节点模块材料-ui-datatables版本0.18.0

您可以在列设置中使用渲染方法来处理列数据。

const currencyToAppend = '€';
const HISTORY_TABLE_COLUMNS = [
  {
    ....
  }, {
    ....
  }, {
    key: 'totalAmount',
    label: 'Total',
    style:{width: '17%'}
    render: (amount, all) => {
        console.log(amount);
        console.log(all);
        return amount + ' ' + currencyToAppend;
    }
  }
];

Answer 3

为了补充@ dev的答案，我建议将单元格渲染为函数，因为这样可以提供更多控制

查看codesandox演示https://codesandbox.io/s/0VVwq645L

const HISTORY_TABLE_COLUMNS = [
  {
    key: "_id",
    label: "Número de pedido",
    style: { width: "37%" },
    value: item =>
      <code>
        {item._id}
      </code>
  },
  {
    key: "created",
    label: "Fecha del pedido",
    style: { width: "33%" },
    value: item => <Time value={item.created} />
  },
  {
    key: "status",
    label: "Estado",
    style: { width: "13%" },
    value: item =>
      <span>
        {item.status}
      </span>
  },
  {
    key: "totalAmount",
    label: "Total",
    style: { width: "17%" },
    value: item => <Amount value={item.totalAmount} currency="€"} />
  }
];

将json数据格式化为表React.js

3 个答案:

此解决方案适用于节点模块材料-ui-datatables版本0.18.0