Блог

Главная - Вопросы по программированию - редуктор массива сцепляется. не прибавляя к сумме. контекст с реакцией

редуктор массива сцепляется. не прибавляя к сумме. контекст с реакцией

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

Все остальное будет таким же.

Метки: