调用Firebase更新后React出现已卸载组件state更新警告且Modal关闭

1. 状态更新警告根因 #

你的TodoModal组件中卸载生命周期函数拼写错误：

// 错误拼写，方法名多了字母n，不会被系统自动触发
compunentWillUnmount = () => {
  this.mounted = false;
}

正确的生命周期函数名为componentWillUnmount，拼写错误导致组件卸载时this.mounted始终为true，后续异步操作完成后执行setState就会触发「不能在已卸载组件上更新状态」的警告。

2. Modal无故关闭根因 #

你在addTodo方法的firebase操作完成后调用了父组件传递的addStep方法，该方法大概率会修改父组件TodoTask的状态：

• 如果addStep执行后修改了父组件中控制Modal显隐的showTaskVisible状态为false，Modal会直接关闭
• 如果addStep修改了任务列表数据，且父组件的列表渲染逻辑存在问题，也会导致Modal被强制卸载关闭

1. 修正生命周期函数拼写

// 修正为正确的方法名
componentWillUnmount = () => {
  this.mounted = false;
}

2. 排查父组件addStep逻辑
   检查TodoTask中的addStep方法，移除方法中修改showTaskVisible状态的逻辑（如果没有添加步骤后主动关闭Modal的需求），确保addStep仅更新任务步骤数据，不触碰Modal显隐状态。
3. 可选冗余代码优化
   你的firebase数据库路径重复写了两次用户uid，可简化为：

await firebase
  .database()
  .ref("Tasks")
  .child(firebase.auth().currentUser.uid)
  .child(this.props.task.taskname)
  .child("Steps")
  .child(this.state.newStep)
  .update({ title: this.state.newStep, status: false, dateAdd: date });

内容的提问来源于stack exchange，提问作者user123456