在 React、Redux 应用程序中，我想使用选择器为对象数组中的每个对象计算小计（价格 * qtyCount）

Question

I edited my question and added the component in question. I suspect maybe just me not understanding the syntax.

My current output in component looks like this 25.0018.00 it should be 25.00 for 1 object and 18.00 for next.

I have an array of objects that look like this:

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'
    }
]

Here is my selector

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

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

This is the selector in question

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

Here is my component where subtotal is displayed

 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

You're passing an array of strings to SubtotalDisplay . When React gets an array node it renders each of the items in the array. That's why you're getting "25.0018.00".

Consider updating the SubtotalDisplay component to render all subtotals passed to it:

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

I found that my problem was actually in another utility function where I was mistakenly mutating data.

//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 }));