#reactjs #react-hooks #reducers #global-state
Вопрос:
компонент:
const { transactions } = useContext(GlobalContext);
const amounts = transactions.map((transaction) => transaction.amount);
const total = amounts.reduce((acc, item) => (acc = item), 0).toFixed(2);
общая константа выдает ошибку из-за исправленной
без фиксации мои числа объединялись бы в строки.
как мои числа считаются строками????????
Я попробовал преобразовать строку в числа с помощью 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>
);
};
Комментарии:
1. константа итого = суммы.уменьшить((acc, товар) => (acc = товар), 0).Исправлено(2);
Ответ №1:
Поскольку сумма-это строка, измените ее на число, и она будет работать.
amounts.reduce((acc, item) => (Number(acc) Number(item)), 0).toFixed(2);
Комментарии:
1. или вы можете просто добавить » » перед пунктом. это преобразует строку в число. Экс:
amounts.reduce((acc, item) => (acc item), 0).toFixed(2);
2. @tmh Вы можете, но это повлияет на читаемость кода.
Ответ №2:
У вас есть тип amount
как строка в вашем initialState
, вот почему она объединяется.
В JS:
Number Number = Number
Но даже если с одной стороны оператора есть String
, а с другой-a Number
, результат будет String
:
String Number = String
Number String = String
Было бы лучше использовать номер в вашем initialState
для всей суммы. например, для
amount: 500
вместо amount: "500"
Или, если вы вставили это по каким-то причинам, используйте приведение типа на втором шаге, чтобы оно выглядело более чистым:
const amounts = transactions.map((transaction) => Number(transaction.amount));
Все остальное будет таким же.