删除项目并从"balance“中删除-()

Question

我试图添加删除方法，它的工作原理是:当我单击按钮时，它会删除该项目，并通过删除的项目费用金额来调整余额。

因此，我的问题是，如何改变“平衡”方法，使其通过删除项目费用来减少余额。

错误消息：

​

​

申请：

​

​

App.js -内部有"balance“方法

import React, { useState } from "react";
import "./App.css";
import Form from "./components/Form.js";
import List from "./components/List.js"
import Alert from "./components/Alert.js"

function App() {
  const initialExpenses = [
    { id: Math.random() * 100000, description: "Example", amount: 0, SelectedCategory: [""] },
  ];

  const [expenses, setExpeneses] = useState(initialExpenses);
  const [description, setDescription] = useState("");
  const [amount, setAmount] = useState("");
  const [alert, setAlert] = useState({show: false});
  const [SelectedCategory, setSelectedCategory] = useState([]);
  

  const handleDescription = e => {
    setDescription(e.target.value);
  }

  const handleAmount = e => {
    setAmount(e.target.value);
  }

  const handleCategory = e => {
    setSelectedCategory(e.target.value);
  }

  const handleSubmit = e => {
    e.preventDefault();

    if(amount > 0 || description !== "") {
      var singleExpenses = {id: Math.random() * 100000, description, amount, SelectedCategory}
      setExpeneses([...expenses, singleExpenses]);
      setAmount("");
      setDescription("");
      handleAlert({text: "Added"});
    } else {
      handleAlert({text: "Value cannot be empty"});
    }
  }

  const handleAlert = ({ text }) => {
    setAlert({show: true, text});
    setTimeout(() => {setAlert({show: false})}, 2000)
  }

  return (
    <>
      {alert.show && <Alert text={alert.text} />}
      <Alert />
      <div class="row">
        <div class="column">
          <h3>Your balance: </h3> // Balance method inside this div
          <span>{expenses.reduce((previous, current) => {return (previous += parseInt(current.amount));}, 0)}$</span>
        </div>
        <Form amount={amount}
              description={description} 
              SelectedCategory={SelectedCategory}
              handleAmount={handleAmount} 
              handleDescription={handleDescription}
              handleCategory={handleCategory} 
              handleSubmit={handleSubmit} />
      </div>
      <List expenses={expenses}
             setExpeneses={setExpeneses}/>
    </>
  );
}

export default App;

List.js -处理删除

import React from 'react';
import Item from './Item.js';

const List = ({ expenses, setExpeneses } ) => {

  const handleDelete = expense => {
    console.log({expense});
    const newExpanse = expenses.filter(item => item.id !== expense.id)
    setExpeneses({newExpanse});
  }

  return (
    <>
        { expenses.map((expense) => {
            return (
              <Item expense={expense} 
                    key={expense.id}
                    handleDelete={handleDelete(expense)}
                    setExpeneses={setExpeneses}/>
            );
          })} 
    </>


  );
  
}
export default List;

Item.js

import React from 'react';

const Item = ({ expense: { id, description, amount, SelectedCategory }, handleDelete }) => {
  return (
    <div class="list">
      <tr>
        <td>{amount}$</td>
        <td>{SelectedCategory}</td>
        <td>{description}</td> 
        <button class="delete_button" onClick={handleDelete}>Delete</button>
      </tr>
      
    </div>
  );
};

export default Item;

Answer 1

看上去这里有两个问题。第一种是调用handleDelete的方式，第二种是handleDelete调用setExpenses的方式。

对于第一个问题，当您将handleDelete作为道具传递给<Item>组件时，将调用它。因此，每个呈现上的每个项都会调用handleDelete，而不是单击时。要修复此更新，您的代码将传递一个函数，而不是handleDelete函数的输出，如下所示：

<Item expense={expense} 
    key={expense.id}
    handleDelete={() => handleDelete(expense)}
    setExpeneses={setExpeneses}
/>

第二个问题是像这样调用setExpeneses：setExpeneses({newExpanse})，它将expenses的值设置为{newExpanse: [...]}，这是一个对象，而不是一个数组，因此expenses.reduce不是一个函数(作为获得状态的错误)。只要移除大括号，只需像这样调用：setExpeneses(newExpanse)，就可以解决这个问题。