在不覆盖元素的情况下操作数组

Question

我正在尝试制作一个价格数组，它的逻辑包含在这个函数中

function getPrices(qty: number, id: string) {
    let mappedPrices = inCart.map(item => item.price)
    let product = inCart.find(item => item.id === id)

    const itemIndex = mappedPrices.indexOf(product.price)
    const newPrice = qty * product.price

    if (~itemIndex) {
        mappedPrices[itemIndex] = newPrice   
    } else {
      mappedPrices
    }

    console.log(mappedPrices)
  }


//inCart types -- [{name: string, image: string, price: number, id: string}]

//Example = [{name: 'shoe', image: 'shoe.png', price: 30, id: 'shoeid'}]

每次我控制台记录它时，都会对一个数字进行更改，但另一个会返回到它的初始值。关于如何解决它的任何线索？

每个 cartItem 组件都会调用 getPrice 函数

 useEffect(() => {
    getPrices(qty, data.id)
  }, [qty])

Answer 1

你正在这样做：

let mappedPrices = inCart.map(item => item.price)

也就是说你的mappedPrices是基于inCart的默认价格，所以每次调用getPrices()只会改变对应产品的价格。

要么使用 foreach 对您的 inCart 产品一次获取所有价格，要么执行 getPrice()（单数）方法并且只获取一个价格。

当然，您将根据自己处理购物车的方式进行选择。

这是a repro on Stackblitz，这是代码：

import React, { Component } from "react";
import { render } from "react-dom";
import "./style.css";

const App = () => {
  const products = [
    {name: 'shoe', image: 'shoe.png', price: 30, id: 1},
    {name: 'boots', image: 'boots.png', price: 25, id: 2}
  ];

  React.useEffect(() => {
    const prices = products.map(p => getPrice(5, p.id))
    console.log(prices);
  });

  const getPrice = (qty, id) => {
    const product = products.find(item => item.id === id)
    const newPrice = qty * product.price

    return newPrice;
  }

  return (
    <div>
      This is a template react
    </div>
  );
};

render(<App />, document.getElementById("root"));

这里没有覆盖任何内容，您只需根据其数据计算当前产品的新价格。