反应货币格式仅显示购物篮中最后一件商品的价格

Question

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

这是我的代码与反应货币格式：

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:UsersProgrammerAppDataLocalnpm-cacheeresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersProgrammerAppDataLocalnpm-cache_logs2021-04-12T07_51_04_200Z-debug.log
PS D:amazoncloneamazon-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:UsersProgrammerAppDataLocalnpm-cacheeresolve-report.txt for a full report.
npm ERR! A complete log of this run can be found in:
npm ERR!     C:UsersProgrammerAppDataLocalnpm-cache_logs2021-04-12T07_52_02_519Z-debug.log

Answer 1

我解决了这个问题。我把价格放在字符串格式时犯了一个错误，然后我把它们放在{}中，问题就解决了。

Answer 2

将价格放入大括号｛｝中，而不是字符串格式的