称一个传奇的创造者是一个无限循环

Question

从我的组件，即Expense Creator，希望删除通过Expense Statement中的map方法从对象数组生成的组件，该组件连接到Redux和saga。(详细信息存储在存储区和本地存储区(。

问题是佐贺，删除函数再次渲染，这是一个无限循环。

以下是与删除功能相关的基本流程，

/1( 组件文件夹中的支出报表组件

class ExpenseStatment extends Component {

render() {
let expenses = this.props.expense.map(expense => {
return(<ExpenseCreator 
key={expense.id}
id={expense.id}
title = {expense.title}
price = {expense.price}
editHandler = {this.props.onEdit}
deleteHandler = {this.props.onDelete}
/> )
})
return (
<div className="ExpenseStatment">
{expenses}
</div>
)
}
}
const mapDispatchToProps = (dispatch) =>{
return{
onEdit : (id) => dispatch (budgetAction.editHandler(id)),
onDelete : (id) => dispatch (budgetAction.deleteHandler(id))
}
}

/2(费用统计中的费用创建者组件

export default class ExpenseCreator extends Component {
render() {
return (
<div className = "ExpenseCreator" >
<p>{this.props.title}</p>
<p>{this.props.price}</p>
<Button onClick={()=>this.props.editHandler(this.props.id)}><EditIcon/></Button>
<Button onClick={()=>this.props.deleteHandler(this.props.id)}><DeleteIcon/></Button>
</div>
)
}
}

/3(还原器文件/动作创建者

export const deleteHandler = (id) =>{>         
return{
type : DELETE_INIT,
id :id
}
}

export const deleteHandlerSuccess = (budgetApp) =>{
return{
type : DELETE_INIT,
expense : budgetApp.expense,
expenditure : budgetApp.expenditure
}
}

/4(佐贺

export function* deleteHandlerSaga(action){
const localValue = JSON.parse(localStorage.getItem("budgetApp"));
const updateValue = {...localValue};
const editObjIndex = updateValue.expense.findIndex(item => item.id === action.id)
updateValue.expense.splice(editObjIndex,1);
const fetchPrice = updateValue.expense.map(x=>x.price).reduce((a,c) => a+c);
updateValue.expenditure = fetchPrice;
updateValue.editMode = false;
console.log(updateValue.expense);
yield localStorage.setItem("budgetApp",JSON.stringify(updateValue));
yield put (actionType.deleteHandlerSuccess(updateValue);
}

/5(还原剂

case DELETE_SUCCESS:
return{
...state,
expense:action.expense,
expenditure : action.expenditure
}

Answer 1

您的动作创建者有一个错误。deleteHandlerSuccess具有类型DELETE_INIT，但它应该是DELETE_SUCCESS。

这会导致一个无限循环，因为完成删除会导致它重新启动，而不是保存结果。