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

每次我用console.log记录它时，对一个数字所做的更改都会被更改，而另一个数字会返回其初始值。关于如何解决的任何线索？

在每个cartItem组件上调用getPrice函数


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

Answer 1

您正在执行此操作：

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

这意味着您的mappedPrices基于inCart的默认价格，因此，每次调用getPrices（）时，它只会更改相应产品的价格。

要么对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"));

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

操纵数组而不覆盖元素

1 个答案: