React class组件删除列表项后列表无法实时更新问题求解

现有代码问题修复 #

你当前的代码存在几个基础语法和逻辑错误，先修正：

1. 构造函数拼写错误：construction 应改为 constructor
2. 生命周期方法位置错误：componentDidMount、componentDidUpdate 需写在class内部，而不是外部
3. componentDidUpdate 缺少前序状态入参，该生命周期默认接收prevProps、prevState两个参数，可用来对比更新前后的状态
4. 状态名大小写不匹配：state中定义的键为objectList，判断逻辑里写的ObjectList大小写错误，会导致读取不到值
5. 数组为引用类型，直接用!==做全等判断永远返回真值，会导致接口无限循环调用，需要基于数组内容做对比
6. 方法未绑定this：getObjectList 调用时会出现this指向错误，需要在constructor中绑定this指向

修正后的基础代码如下：

class ListOfItems extends Component {
  constructor (props) {
    super(props);
    this.state = {
      objectList: []
    }
    // 绑定方法this指向
    this.getObjectList = this.getObjectList.bind(this)
  }

  componentDidMount() {
     this.getObjectList();
  }

  componentDidUpdate(prevProps, prevState) {
    const prevList = prevState.objectList
    const currentList = this.state.objectList
    // 基于数组长度和元素唯一标识判断列表是否真实变化，避免无限请求
    const isListChanged = prevList.length !== currentList.length 
      || prevList.some((item, index) => item.id !== currentList[index].id)
    if(isListChanged) {
      this.getObjectList()
    }
  }

  // 拉取列表的方法，请求成功后必须更新state触发重渲染
  getObjectList() {
    // 替换为你的实际接口请求逻辑
    fetch('/your/api/endpoint')
      .then(res => res.json())
      .then(resData => {
        this.setState({
          objectList: resData
        })
      })
  }

  render() {
    // 你提到不可修改的列表渲染逻辑放在此处
    return (
      <div>
        {this.state.objectList.map(item => (
          <Object 
            objectList={this.state.objectList}
            data={item}
            // 其他原有props
          />
        ))}
      </div>
    )
  }
}

删除后实时更新的实现方案 #

提供两种无需修改现有Object组件调用逻辑的实现方式：

方案1：前端直接更新状态（性能最优） #

在Object组件的删除接口请求成功后，直接过滤掉已删除的项，更新父组件state：

// 写在Object.js的删除成功回调逻辑中
const handleDelete = async () => {
  // 先执行删除接口请求
  await deleteItemApi(this.props.data.id)
  // 过滤掉已删除项，更新父组件state
  const updatedList = this.props.objectList.filter(item => item.id !== this.props.data.id)
  this.setState({ objectList: updatedList })
}

方案2：删除成功后主动触发列表拉取 #

如果不希望前端直接修改列表，可通过自定义事件通信触发父组件拉取最新后端数据，完全无需修改原有组件调用逻辑：

• 第一步：在ListOfItems组件中添加自定义事件监听

componentDidMount() {
  this.getObjectList();
  // 监听删除完成事件
  window.addEventListener('itemDeleted', this.getObjectList)
}

componentWillUnmount() {
  // 组件卸载时移除监听，避免内存泄漏
  window.removeEventListener('itemDeleted', this.getObjectList)
}

• 第二步：在Object组件删除成功后触发事件

// 写在Object.js的删除成功回调逻辑中
const handleDelete = async () => {
  await deleteItemApi(this.props.data.id)
  // 触发自定义事件，通知父组件拉取最新列表
  window.dispatchEvent(new CustomEvent('itemDeleted'))
}

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