react-currency-format 只显示篮子里最后一件商品的价格

如何解决react-currency-format 只显示篮子里最后一件商品的价格

嘿，我想计算商品价格的总和，但它只显示最后一件商品的价格： 这是我的 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 时出错，我 --force 了它。这是错误： npm i react-currency-format
npm 通知 npm 通知 新的 npm 次要版本可用！ 7.3.0 -> 7.9.0
npm 通知更新日志：https://github.com/npm/cli/releases/tag/v7.9.0 npm 通知 运行 npm install -g npm@7.9.0 进行更新！ npm 通知 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖树 npm 错误！ npm 错误！解析时：your-project-name@0.1.0 npm 错误！发现：react@17.0.2 npm 错误！节点模块/反应 npm 错误！ react@"^17.0.2" 来自根项目 npm 错误！ npm 错误！无法解决依赖： npm 错误！对等反应@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0" 来自 react-currency-format@1.0.0 npm 错误！ node_modules/反应货币格式 npm 错误！ react-currency-format@"*" 来自根项目
npm 错误！ npm 错误！修复上游依赖冲突，或者重试 npm 错误！此命令带有 --force 或 --legacy-peer-deps npm 错误！接受不正确（并且可能损坏）的dependencnpm ERR！有关完整报告，请参阅 C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ C:\Users\Programmer\AppData\Local\npm-cache_logs\2021-04-12T07_51_04_200Z-debug.log PS D:\amazonclone\amazon-clone> npm install react-currency-format - 节省 npm 错误！代码 ERESOLVE npm 错误！ ERESOLVE 无法解析依赖树 npm 错误！ npm 错误！解析时：your-project-name@0.1.0 npm 错误！发现：react@17.0.2 npm 错误！节点模块/反应 npm 错误！ react@"^17.0.2" 来自根项目 npm 错误！ npm 错误！无法解决依赖： npm 错误！对等反应@"^0.14 || ^15.0.0-rc || ^15.0.0 || ^16.0.0-rc || ^16.0.0" 来自 react-currency-format@1.0.0 npm 错误！ node_modules/反应货币格式 npm 错误！ react-currency-format@"*" 来自根项目
npm 错误！ npm 错误！修复上游依赖冲突，或者重试 npm 错误！此命令带有 --force 或 --legacy-peer-deps npm 错误！接受不正确（并且可能已损坏）的依赖项解析。 npm 错误！ npm 错误！有关完整报告，请参阅 C:\Users\Programmer\AppData\Local\npm-cache\eresolve-report.txt。

npm 错误！可以在以下位置找到此运行的完整日志： npm 错误！ C:\Users\Programmer\AppData\Local\npm-cache_logs\2021-04-12T07_52_02_519Z-debug.log

解决方法

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