reactjs - 数组减速器正在连接。不加总和。反应的上下文
问题描述
零件:
const { transactions } = useContext(GlobalContext);
const amounts = transactions.map((transaction) => transaction.amount);
const total = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
由于 toFixed,总 const 引发错误
如果没有 toFixed,我的数字将连接为字符串。
我的数字如何被视为字符串??????
我尝试使用 Number 和 parseInt 将字符串转换为数字。它不起作用。
为什么数字连接为字符串?
这是全局状态:
import React, { createContext, useReducer } from "react";
import AppReducer from "./AppReducer";
//Initial State
const initialState = {
transactions: [
{
id: 1,
name: "Payment to Molly Sanders",
href: "#",
category: "expense",
amount: "200",
currency: "USD",
status: "success",
date: "July 11, 2020",
datetime: "2020-07-11",
},
{
id: 2,
name: "Rent",
href: "#",
category: "expense",
amount: "100",
currency: "USD",
status: "processing",
date: "July 1, 2020",
datetime: "2020-07-11",
},
{
id: 3,
name: "Google",
href: "#",
category: "income",
amount: "500",
currency: "USD",
status: "success",
date: "July 18, 2020",
datetime: "2020-07-18",
},
],
};
//Create context
export const GlobalContext = createContext(initialState);
//Provider component
export const GlobalProvider = ({ children }) => {
const [state, dispatch] = useReducer(AppReducer, initialState);
return (
<GlobalContext.Provider
value={{
transactions: state.transactions,
}}>
{children}
</GlobalContext.Provider>
);
};
解决方案
因为金额是字符串,将其更改为数字,它将起作用。
amounts.reduce((acc, item) => (Number(acc) + Number(item)), 0).toFixed(2);
推荐阅读
- javascript - 带有 ng-repeat 的 Angular 模板,无法跟踪其中的值
- laravel - 使用自动重定向时如何自定义验证错误消息?
- java - 如何使用 javafx 从数据库中获取数据(存储和检索)创建全局变量?
- sql - 由于表/对象为只读,使用 CreateQueryDef 创建查询失败
- c# - 如何在 C# 中向线程添加函数?
- php - php dom 通过 div id 获取元素
- linux - 为我的 VCAP_SERVICES 设置环境变量
- java - DocuSign Java JWT 身份验证失败,400 错误请求,consent_required
- php - Vimeo API:如何将 vimeo 保存到子文件夹中?
- powershell - 将两个 XML 与 PowerShell 匹配并产生减去第三个 XML?