В приложении React, Redux я хочу вычислить промежуточную сумму (цена * qtyCount) для каждого объекта в массиве объектов с помощью селектора.

Question

Я отредактировал свой вопрос и добавил соответствующий компонент. Я подозреваю, что, возможно, только я не понимаю синтаксис.

Мой текущий вывод в компоненте выглядит следующим образом 25.0018.00 это должно быть 25.00 для 1 объекта и 18.00 для следующего.

I есть массив объектов, которые выглядят так:

Json:

counters: [
    {
      id: "lam1g8uzn",
      windowType: "First ",
      windowLocation: "Out",
      price: 5,
      qtyCount: 5,
      imgUrl:'long string'
    },
    {
      id: "r5hamynf3",
      windowType: "Second ",
      windowLocation: "In",
      price: 2,
      qtyCount: 9,
      imgUrl: 'long string'
    }
]

Вот мой селектор

  const selectCounter = (state) => state.counter;

  export const selectCounterItems = createSelector(
   [selectCounter],
   (counter) => counter.counters,
  );

Это рассматриваемый селектор

  export const selectCounterSubtotal = createSelector(
      [selectCounterItems],
      (counters) => counters.map((counter) => (
      (counter.qtyCount * counter.price).toFixed(2)
    )),
  );

Вот мой компонент, в котором отображается промежуточный итог

 import { connect } from 'react-redux';
 import { createStructuredSelector } from 'reselect';
 import { selectCounterSubtotal } from '../../redux/counter/counter- 
 selectors';

 const SubTotalDisplay = ({ subTotal }) => (
  // const subtotal = (qty * price).toFixed(2);
  <div className="subtotal-diaplay">
  <span> Subtotal $</span>
  <span className="subtotal">{subTotal}</span>
  </div>
 );

 const mapStateToProps = createStructuredSelector({
  subTotal: selectCounterSubtotal,
 });

export default connect(mapStateToProps, null)(SubTotalDisplay);

Answer 1

Вы передаете массив строк в SubtotalDisplay. Когда React получает узел массива, он рендерит каждый из элементов в массиве. Вот почему вы получаете "25.0018.00".

Подумайте об обновлении компонента SubtotalDisplay, чтобы отобразить все переданные промежуточные итоги:

const SubTotalDisplay = ({ subTotals }) => (
  subTotals.map((subTotal, index) => (
    <div className="subtotal-display" key={index}>
      <span> Subtotal $</span>
      <span className="subtotal">{subTotal}</span>
    </div>
  ))
);

const mapStateToProps = createStructuredSelector({
  subTotals: selectCounterSubtotal,
});

Answer 2

Я обнаружил, что моя проблема на самом деле в другой служебной функции, в которой я ошибочно изменял данные.

//Right Way    
export const resetAllCounters = (counters) => counters.map((counter) => ({ 
       ...counter, qtyCount: 0 }));

// Wrong way mutating data
export const resetAllCounters = (counters) => counters.map((counter) => 
Object.assign(counter, { qtyCount: 0 }));