Javascript 是否更新其他组件中的已删除项？
我正在建立一个预算计算器，计算交易和收入，并返回余额。我可以选择删除收入和交易，但当我单击按钮时，它会消失，但不会更新余额。余额在一个组件中，而删除列表的按钮在另一个组件中。我不知道从哪里开始。有人能给我指出正确的方向吗 这是我的密码：Javascript 是否更新其他组件中的已删除项？,javascript,reactjs,Javascript,Reactjs,我正在建立一个预算计算器，计算交易和收入，并返回余额。我可以选择删除收入和交易，但当我单击按钮时，它会消失，但不会更新余额。余额在一个组件中，而删除列表的按钮在另一个组件中。我不知道从哪里开始。有人能给我指出正确的方向吗 这是我的密码： class App extends React.Component { constructor(props) { super(props); this.state = { balance: [0] } } get
class App extends React.Component {
constructor(props) {
super(props);
this.state = {
balance: [0]
}
}
getBalance = (total) => {
console.log(total)
this.setState((prevState) => ({
balance: [prevState.balance, total].reduce((acc, currentVal) => {
return Number(acc) + Number(currentVal)
}, 0)
}));
}
render() {
return (
<div className="App" >
<div className="count">
<h2 className="balancetitle">Your Balance</h2>
<h1 style={{ color: this.state.balance >= 0 ? 'green' : 'red' }}>${this.state.balance}</h1>
</div>
<Transactions getBalance={(total) => this.getBalance([total])} />
<Income getBalance={(total) => this.getBalance([total])} />
</div>
);
}
}
const Transactions = (props) => {
const [expenses, setExpense] = useState([])
const [amount, setAmount] = useState([])
const [id, setId] = useState([])
const [listOfTrans, setListofTrans] = useState([])
const [total, setTotal] = useState([0])
//fires on click or enter
const handleSubmit = (e) => {
e.preventDefault();
addExpense({
amount,
expenses,
id
});
props.getBalance(-Math.abs(amount));
setAmount('');
setExpense('');
}
//get value of inputs
const getValue = (hookSetter) => (e) => {
let { value } = e.target;
return hookSetter(value)
}
// turn amount and expense into objects and put them setListofTranas
const addExpense = (expenseObject) => {
setListofTrans([...listOfTrans, expenseObject])
}
// get total amount of listoftrans
const getAmount = () => {
if (listOfTrans.length >= 0) {
let listAmount = listOfTrans.map(list => {
if (list.amount) {
return -Math.abs(list.amount);
} else {
return 0;
}
})
return listAmount.reduce((acc, currentValue) => {
return Number(acc) + Number(currentValue)
}, 0)
} else return 0
}
//update amount total on click
useEffect(() => {
setTotal(getAmount())
}, [listOfTrans])
// delete item from array
const deleteExpense = (i) => {
let objExpense = i
setListofTrans(listOfTrans.filter((list) => {
return list.id !== objExpense
}))
}
return (
<div className="transactions">
<div className="expenses">
<span>{amount === '' || expenses === '' ? <p>Please Fill Out Input Fields</p> : ''}</span>
<form onSubmit={handleSubmit}>
<input
type="text"
id="expense"
className="formfield"
name="expense"
placeholder="Expense..."
value={expenses}
onChange={getValue(setExpense)}
/>
<input
type="text"
id="amount"
className="formfield"
name="amount"
placeholder="Amount..."
value={amount}
onChange={getValue(setAmount)}
/>
<button type="submit">Submit</button>
</form>
</div>
<div className="finalbalance ">
<div className="finalexpense final">
<table>
<tbody>
<tr>
<th>Total Expenses: ${total}</th>
</tr>
<tr>
<th>EXPENSES</th>
<th>AMOUNT</th>
</tr>
</tbody>
{
listOfTrans.map((trans, i) => {
return (
<tbody key={trans.id}>
<tr key={trans.id++}>
<td>{trans.expenses}</td>
<td>{"$" + trans.amount}</td>
<td>
<button onClick={() => deleteExpense(trans.id)}>
<i className="fas fa-trash-alt"></i>
</button>
</td>
</tr>
</tbody>
)
})
}
</table>
</div>
</div>
</div>
)
}
类应用程序扩展了React.Component{
建造师（道具）{
超级（道具）；
此.state={
余额：[0]
}
}
getBalance=（总计）=>{
console.log（总计）
this.setState（（prevState）=>({
余额：[prevState.balance，total]。减少（（acc，currentVal）=>{
返回编号（acc）+编号（currentVal）
}, 0)
}));
}
render（）{
返回(
你的余额
=0？'green'：'red'}>${this.state.balance}
此.getBalance（[total]）}/>
此.getBalance（[total]）}/>
);
}
}
常量事务=（道具）=>{
const[expenses，setExpense]=useState（[]）
const[amount，setAmount]=useState（[]）
const[id，setId]=useState（[]）
const[listOfTrans，setListofTrans]=useState（[]）
常量[total，setTotal]=useState（[0]）
//单击或输入即可激发
常量handleSubmit=（e）=>{
e、 预防默认值（）；
附加费用({
数量
费用，
身份证件
});
道具.getBalance（-Math.abs（amount））；
设定金额（“”）；
固定费用（“”）；
}
//获取输入值
const getValue=（hookSetter）=>（e）=>{
设{value}=e.target；
返回钩子设置器（值）
}
//将金额和费用转化为对象，并将其放在Tranas的setListofTranas中
const addExpense=（expenseObject）=>{
setListofTrans（[…listOfTrans，expenseObject]）
}
//获取listoftrans的总量
常量getAmount=（）=>{
if（listOfTrans.length>=0）{
让listAmount=listOfTrans.map（列表=>{
如果（列表金额）{
return-Math.abs（list.amount）；
}否则{
返回0；
}
})
返回listAmount.reduce（（acc，currentValue）=>{
返回编号（acc）+编号（currentValue）
}, 0)
}否则返回0
}
//点击更新总金额
useffect（（）=>{
setTotal（getAmount（））
}，[listOfTrans]）
//从数组中删除项
成本费用=（i）=>{
设objExpense=i
SetListOftTrans（ListOftTrans.filter（（列表）=>{
return list.id！==对象费用
}))
}
返回(
{金额==''| |费用==''？请填写输入字段：'}
提交
总费用：${Total}
费用
数量
{
listOfTrans.map（（trans，i）=>{
返回(
{交易费用}
{“$”+交易金额}
deleteExpense（trans.id）}>
)
})
}
)
}
const deleteExpense = (i) => {
let objExpense = i;
setListofTrans(
listOfTrans.filter((list) => {
if (list.id === objExpense) {
props.getBalance(Math.abs(list.amount)); // <-- add the amount back to balance
return false;
}
return true
})
);
};
const deleteExpense=（i）=>{
设objExpense=i；
setListofTrans(
listOfTrans.filter（（列表）=>{
if（list.id==对象费用）{
props.getBalance（Math.abs（list.amount））；//还有，我本来打算这么做的，但我一直认为你必须在不同的区域保留不同的组件，我对组件的拆分做得太多了。@Alanaj啊，不客气，再一次！）当然。不过，我认为一个好的经验法则是，不要将任何状态存储在任何可以从现有状态轻松派生/计算的地方，比如数组上的值的总和。大概数组只有在更新时才会重新排序，所以余额只会同时更新。