Reactjs 创建预算应用程序的清除功能

我正在创建一个清除按钮，单击该按钮后，将清除已添加到带有localStorage的事务列表中的所有事务。我的按钮工作，但它的错误，一旦它被点击，我得到以下关于一个单独的功能错误，我必须得到平衡。如果我刷新页面，尽管所有事务都将被清除

我收到的错误

TypeError: amounts.reduce(...).toFixed is not a function

我的组件

import react, {useState, useEffect} from 'react'
import Transaction from './Transaction'


const Form = () => {

//initial state
const [transaction, setTransaction] = useState({
    description: '',
    amount: ''
  })
  const [list, setList] = useState(
    JSON.parse(localStorage.getItem('list')) || []
  )
  const [balance, setBalance] = useState('')
  const [income, setIncome] = useState(
    JSON.parse(localStorage.getItem('income'))
  )
  const [expense, setExpense] = useState(JSON.parse(localStorage.getItem('expense')))

    //updates based onChange value
const updateBalance = (e) => {
    setTransaction({
        ...transaction,
        [e.target.name]:
         e.target.type == 'number' ? parseInt(e.target.value) : e.target.value
        })
}

//identify if transaction is income/expense

const plusMinus = () => {
    transaction.amount > 0
     ? setIncome(income + transaction.amount)
      : setExpense(expense + transaction.amount)
}
// updates balance after transaction is added

const getBalance = () => {
    const amounts = list.map(i => i.amount);
    const money = amounts.reduce((acc, item) => (acc += item), 0).toFixed(2);
    setBalance(money)
  }
  
useEffect(() => {
    getBalance()
    localStorage.setItem('list', JSON.stringify(list))
    localStorage.setItem('income', JSON.stringify(income))
    localStorage.setItem('expense', JSON.stringify(expense))
  }, [list])


//clear transaction list
const clearBudget = () => {
    localStorage.clear();
}

const onSubmit = e => {
    e.preventDefault();
    setList([transaction, ...list])
    plusMinus()
    setTransaction({ description: '', amount: ''})
    }

return (
    
    <div>
        <div className='totals'>
        <h2 className='balance'> Current Balance </h2>
        <h3> ${balance} </h3>
            <h4> Income: ${income} Expense: ${expense} </h4>
        </div>
        < br />
        < br />
        < br />
         <h2 className='trans-history'> Transaction History </h2>
           {list.map(i => {
               return (
                   <div className='trans'>
                       <ul  key={i.description}>
                    {i.description} ${parseInt(i.amount)}
                   </ul>
                   </div>
               )
           })}
           <br />
           <br />
        <h2 className='enter-item'> Enter an Item </h2>
        <form onSubmit={onSubmit}>
       <div> 
           <input 
           type='text' 
           className="input-trans" 
           placeholder='Enter Transaction'
           value={Transaction.description}
           name='description'
           onChange={updateBalance}
           >
           </input>
        </div> 
        <div>
        <input 
        type='number'
         className='input-trans' 
         placeholder='Enter Amount'
         name='amount'
         value={transaction.amount}
         onChange={updateBalance}
         >
        </input>
        </div>
        <br/>
        <div className='button-container'>
            <button type='submit' className='button is-primary'> Submit </button>
            <button className='button is-danger' onClick={clearBudget}> Clear </button>
        </div>
    </form>
    </div>
 )
}

export default Form

import react，{useState，useffect}来自“react”
从“./Transaction”导入事务
常数形式=（）=>{
//初始状态
const[transaction，setTransaction]=useState({
说明：“”，
金额：''
})
const[list，setList]=useState(
JSON.parse（localStorage.getItem（'list'））| |[]
)
const[balance，setBalance]=使用状态（“”）
const[income，setIncome]=使用状态(
parse（localStorage.getItem（'income'））
)
const[expense，setExpense]=useState（JSON.parse（localStorage.getItem（'expense'））
//基于onChange值的更新
常量更新平衡=（e）=>{
setTransaction({
交易
[e.target.name]：
e、 target.type==“number”？parseInt（e.target.value）：e.target.value
})
}
//确定交易是否为收入/费用
常量plusMinus=（）=>{
交易记录金额>0
？设定收入（收入+交易金额）
：设置费用（费用+交易金额）
}
//添加交易记录后更新余额
常量getBalance=（）=>{
const amounts=list.map（i=>i.amount）；
const money=金额。减少（（acc，项目）=>（acc+=项目），0）。toFixed（2）；
退平衡（货币）
}
useffect（（）=>{
getBalance（）
localStorage.setItem（'list'，JSON.stringify（list））
localStorage.setItem（'income'，JSON.stringify（income））
localStorage.setItem（'expense'，JSON.stringify（expense））
}，[列表]）
//清除交易清单
常量clearBudget=（）=>{
localStorage.clear（）；
}
const onSubmit=e=>{
e、 预防默认值（）；
setList（[事务，…列表]）
普鲁斯米努斯（）
setTransaction（{说明：''，金额：'}）
}
返回(
经常项目差额
${balance}
收入：${收入}费用：${费用}






交易历史
{list.map（i=>{
返回(

{i.description}${parseInt（i.amount）}

)
})}




输入项目


提交
清楚的
)
}
导出默认表单

看起来像

金额。reduce

返回的不是数字的内容。您可以在执行

toFixed

功能之前检查类型

例如：

const amounts=list.map（（i）=>i.amount.map（编号）；
const money=金额减少（（会计科目，项目）=>（会计科目+=项目），0）
如果（货币类型=='number'）{
资产负债表（货币对固定资产（2））
}否则{
退平衡（货币）
}

您在

getBalance（）

中的

列表的值是多少？我更新了我的问题以显示我的组件。谢谢Gabe！你有没有可能把它扔进一个代码沙盒或代码笔，这样我们就可以再戳一戳？我尝试过这样做，但是当我试图清除它时，它只是填充NaN而不是删除事务。这意味着你的reduce方法返回的是而不是一个数字，我建议检查项目的类型，也许它实际上是一个字符串，而不是一个数字，如果是这样的话，我会更新我的答案是的，所以它现在的集合是一个字符串，我在我的原始问题中更新了我的所有代码。检查我更新的答案，你可以使用地图将所有的数量解析为一个数字，如果是因为它是一个字符串，我会删除类型检查感谢您的持续帮助，但即使有更新的答案，我仍然有问题，当我清除事务时，仍然以NaN的身份出现。