删除Firebase中Item后，如何更新PathItems组件清除残留描述？

你遇到的问题核心很清晰：删除某个Item后，左侧列表里的Item已经消失，但右侧的FullDecript组件还保留着被删除Item的内容。这是因为父组件PathItems中的info状态没有随着列表数据的更新同步清空——虽然Firestore的数据已经更新，pathDescription列表也刷新了，但你之前选中的那个被删除Item的信息还存在info状态里，所以右侧组件依然会渲染它。

解决方案：监听列表变化，自动清空无效的info状态 #

我们可以在PathItems组件中添加一个useEffect钩子，监听pathDescription的变化。每次列表更新时，检查当前info对应的Item是否还存在于新的列表中，如果不存在（说明已经被删除），就把info设为null，这样右侧的FullDecript组件就会自动消失。

修改后的PathItems组件代码如下：

import Item from "./PathItem";
import FullDecript from "./PathFullDescription";
import { firestoreConnect } from 'react-redux-firebase';
import { compose } from "redux";
import { connect } from "react-redux"
import {Col, Row} from "react-bootstrap";
import { useState, useEffect } from 'react'; // 别忘了导入useEffect

const PathItems = (props) => {
 const divStyle = { overflowY: 'scroll', height: '85vh' };
 const [info, setInfo] = useState(null);

 // 新增：监听pathDescription的变化，清空无效的info
 useEffect(() => {
   // 如果当前有选中的info，且该info不在更新后的列表中
   if (info && props.pathDescription) {
     const itemExists = props.pathDescription.some(item => item.id === info.id);
     if (!itemExists) {
       setInfo(null);
     }
   }
 }, [props.pathDescription, info]); // 依赖列表数据和info状态

 return (
 <React.Fragment>
 <Row>
 <Col className="pl-0 border-right border-dark" style={divStyle}>
 {props.pathDescription && props.pathDescription.map(item => (
 <Item key={item.id} item={item} onInfoChange={setInfo} />
 ))}
 </Col>
 <Col>
 {info !== null ? <FullDecript {...info}/> : null}
 </Col>
 </Row>
 </React.Fragment>
 )
}

const mapStateToProps = (state) => {
 return {
 pathDescription: state.firestore.ordered.pathDescription
 }
}

export default compose(
 firestoreConnect(()=> ['pathDescription']),
 connect(mapStateToProps)
)(PathItems);

补充说明：为什么这个方案有效？ #

• 当你删除Item后，Firestore的数据更新会触发pathDescription prop的变化，进而触发这个useEffect钩子。
• 我们通过some方法检查当前info的id是否还存在于新的pathDescription列表中：
  • 如果不存在，说明该Item已经被删除，调用setInfo(null)清空状态，右侧的FullDecript组件就会停止渲染。
  • 如果存在（比如删除的是其他Item），则保持当前的info状态不变，右侧内容正常显示。

这个方案直接依赖数据源的变化来同步UI状态，逻辑清晰且能覆盖所有删除场景，是比较稳妥的处理方式。

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