React中setState异步更新导致tile点击切换逻辑异常如何解决？

核心问题分析 #

你原代码的根本问题有两个：

1. 依赖setState调用后立即读取this.state做判断，但setState是异步更新，读取到的永远是本次事件触发前的旧状态，导致逻辑完全错位
2. 状态设计冗余，mode属于派生状态不需要单独存储，且用e.target作为匹配依据不可靠，容易因为事件冒泡指向子元素出现异常

优化实现方案 #

第一步：调整状态设计 #

只用一个activeTileId字段作为单一数据源，存储当前处于<p>展示状态的tile的唯一标识，初始值为null（代表所有tile都展示图片）：

// 初始state
state = {
  activeTileId: null
}

第二步：重写点击处理逻辑 #

使用函数式setState直接基于上一次的状态计算新状态，彻底避开异步更新的问题：

handleClickTile = (currentTileId) => {
  this.setState(prevState => ({
    // 如果点击的是当前激活的tile，就设为null（切换回图片），否则设为当前点击的tile id
    activeTileId: prevState.activeTileId === currentTileId ? null : currentTileId
  }))
}

第三步：渲染tile时绑定事件、判断展示内容 #

给每个tile绑定点击事件时传入自身的唯一id，渲染时直接用activeTileId匹配判断要展示的元素：

// 假设你的tile列表数据为tileList，每一项有唯一id字段
tileList.map(tileItem => (
  <div 
    key={tileItem.id}
    className="tile"
    onClick={() => this.handleClickTile(tileItem.id)}
  >
    {this.state.activeTileId === tileItem.id ? (
      <p>你要展示的段落内容</p>
    ) : (
      <img src={tileItem.imgUrl} alt={tileItem.altText} />
    )}
  </div>
))

效果说明 #

这个方案天然满足所有交互要求：

1. 点击图片状态的tile：activeTileId更新为当前tile id，该tile自动切换为<p>展示，此前激活的tile因为id不匹配自动切换回图片，保证同一时间最多只有一个<p>
2. 点击段落状态的tile：activeTileId设为null，该tile自动切换回图片
3. 完全规避了setState异步带来的状态读取错误问题，逻辑大幅简化

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