React JS点击单个按钮引发所有按钮图标切换的问题修复咨询

这个问题我之前也踩过坑！核心原因是你现在用一个单一的icon布尔值来控制所有按钮的图标状态——不管点击哪个按钮，这个全局的状态一变，所有依赖它的图标都会跟着切换，自然就出现了“点一个全变”的情况。

要解决这个问题，我们需要给每个按钮单独维护自己的展开状态，而不是用一个全局变量。具体步骤如下：

1. 重新初始化状态 #

把原来单一的icon状态，改成一个用来记录每个按钮索引对应状态的对象（或者数组）。比如用对象的话，初始是空对象，默认所有按钮都是未展开状态：

constructor(props){ 
  super(props) 
  this.state={ expanded: {} } // 用对象存储每个按钮的展开状态，键是索引，值是布尔值
}

2. 修改点击事件处理函数 #

原来的active函数只切换全局状态，现在要改成根据点击的按钮索引，单独更新对应位置的状态。这里推荐用函数式setState，因为状态更新是异步的，函数式写法能确保我们基于最新的状态进行修改：

active = (index) => {
  this.setState(prevState => ({
    expanded: {
      ...prevState.expanded, // 复制之前的状态，避免直接修改原对象
      [index]: !prevState.expanded[index] // 切换当前按钮的状态，默认未展开的话就是false，取反变成true
    }
  }));
}

3. 调整渲染逻辑 #

在渲染每个按钮的图标时，不再依赖全局的icon变量，而是根据当前按钮的索引，从expanded对象里取对应的状态。同时，点击事件直接传递当前按钮的索引，不用再从事件对象里取data-id：

const menu = ['A','B','C','A','B','C','A','B','C']
<div className="nav_menu">
  <ul>
    {menu.map((item,index) => (
      <li key={index}> {/* 注意：如果menu里有唯一标识，最好不用index当key，比如item的专属ID，不过先解决当前核心问题 */}
        <Link 
          className="inactive" 
          to={`${match.url}`} 
          onClick={() => this.active(index)} // 直接传递当前索引
        >
          <span>
            <span>
              <FontAwesomeIcon icon={faHome} className="icon"/>
            </span>
            {item}
          </span>
          {/* 根据当前索引的状态切换图标 */}
          <FontAwesomeIcon 
            icon={this.state.expanded[index] ? faAngleDown : faAngleRight} 
            className="angle"
          />
        </Link>
      </li> 
    ))}
  </ul>
</div>

额外小提示 #

• 如果你的menu数组里的每个项有唯一ID（比如不是重复的'A'/'B'/'C'），最好用这个唯一ID作为key，而不是索引——用索引当key在数组项顺序变化时可能会导致React渲染异常。
• 如果你更喜欢用数组来存储状态，也可以把初始状态改成this.state={ expanded: new Array(menu.length).fill(false) }，然后在active函数里复制数组并修改对应索引的值，逻辑是类似的。

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