在.map()中的变量前面加一个$ - React

Question

我正在使用mongodb进行react项目，我正在使用google react图表绘制我的一些数据。我的一个图表包含一个总销量变量(x.sales)，我想知道是否有人知道在我的图表中向该变量添加$的方法?

<div>
<h2 className="graphname">Daily Sales</h2>
{summary.dailySales.length === 0 ? (
<MessageBox>No Sale</MessageBox>
) : (
<Chart
width="100%"
height="400px"
chartType="AreaChart"
loader={<div>Loading Chart</div>
}
data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [x._id, x.sales]),
]} 
options={{
vAxis: { minValue: 0 },
}}
>

</Chart>

)}
</div>

我试过new Intl.NumberFormat('en-US', {style: 'currency', currency: 'USD'}).format(x.sales)，但那不起作用。我将非常感谢任何关于如何做到这一点的建议。谢谢你！

Answer 1

可以使用字符串字面值

data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [x._id, `$${x.sales}`])]}

或者您可以连接字符串

data={[
['Date', 'Sales'],
...summary.dailySales.map((x) => [x._id, "$" + x.sales.toString()])]}

或者您可以使用国际数字格式化程序，但要确保x.sales是一个数字

data={[
['Date', 'Sales'],
...summary.dailySales.map((x) =>{
//Ensure it's a number and not a string
const number = parseFloat(x.sales).toFixed(2)
const formatted = new Intl.NumberFormat('en-US', { style: 'currency', currency: 'USD' }).format(number)
return[x._id, formatted ]
}

然后将数据传递给图表组件