react-currency-format 仅显示购物篮中最后一件商品的价格

Question

我想计算商品价格的总和，但它只显示最后一件商品的价格。

这是我的 react-currency-format 代码：

function Subtotal() {
        const [{basket}, dispatch]= useStateValue();

            
    return (
        <div className="subtotal">
        <CurrencyFormat
            renderText={(value) =>(
                <>
                    <p>
                        Subtotal({basket?.length} items):
                        <strong>{value}</strong>
                    </p>
                    <small className="subtotal-gift">
                        <input type="checkbox" /> this order contains a gift
                    </small>
                </>
            )}
            decimalScale={2}
            value={getBasketTotal(basket)}
            displayType={"text"}
            thousandSeparator={true}
            prefix={"$"}
      />
      <button>Proceed to checkout</button>
            
        </div>
    )
}

这是我在 reducer.js 中的 reduce 函数：

export const getBasketTotal = (basket) => 
    basket?.reduce((amount, item) => item.price + amount  , 0)

我在安装 react-currency 时出错，我 --forced 安装它。这是错误：

npm i react-currency-format       
npm notice 
npm notice New minor version of npm available! 7.3.0 -> 7.9.0     
npm notice Changelog: https://github.com/npm/cli/releases/tag/v7.9.0
npm notice Run npm install -g npm@7.9.0 to update!
npm notice 
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR!
npm ERR! While resolving: your-project-name@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc 
|| ^16.0.0" from react-currency-format@1.0.0
npm ERR! node_modules/react-currency-format
npm ERR!   react-currency-format@"*" from the root project        
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependencnpm ERR! See C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Programmer\AppData\Local\npm-cache\_logs21-04-12T07_51_04_200Z-debug.log
PS D:\amazonclone\amazon-clone> npm install react-currency-format 
--save
npm ERR! code ERESOLVE
npm ERR! ERESOLVE unable to resolve dependency tree
npm ERR! 
npm ERR! While resolving: your-project-name@0.1.0
npm ERR! Found: react@17.0.2
npm ERR! node_modules/react
npm ERR!   react@"^17.0.2" from the root project
npm ERR!
npm ERR! Could not resolve dependency:
npm ERR! peer react@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc 
|| ^16.0.0" from react-currency-format@1.0.0
npm ERR! node_modules/react-currency-format
npm ERR!   react-currency-format@"*" from the root project        
npm ERR!
npm ERR! Fix the upstream dependency conflict, or retry
npm ERR! this command with --force, or --legacy-peer-deps
npm ERR! to accept an incorrect (and potentially broken) dependency resolution.
npm ERR!
npm ERR! See C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt for a full report.

npm ERR! A complete log of this run can be found in:
npm ERR!     C:\Users\Programmer\AppData\Local\npm-cache\_logs21-04-12T07_52_02_519Z-debug.log

Answer 1

我解决了这个问题。我在将价格设为字符串格式时犯了一个错误，然后我将它们放入 {} 并解决了问题。

Answer 2

将您的价格放入大括号 {} 而不是字符串格式

react-currency-format 仅显示购物篮中最后一件商品的价格

react-currency-format only shows the last item's price from basket

reduce

reactjs