React中map渲染按钮数组时无法单独切换指定按钮问题求解

原来的代码所有渲染出的按钮共用同一个全局toggle状态，因此任意按钮触发状态变更都会同步影响所有按钮的展示效果，无法实现单独控制。

我们需要调整状态结构，用键值对的形式存储每个数据项对应的按钮状态，点击时仅修改当前项对应的状态值：

完整代码 #

import { useState } from 'react';
import { data } from './data';
import "./styles.css";

export default function App() {
  // 状态改为存储每个项的切换状态，键为数据的唯一id，值为当前按钮状态
  const [toggleStatus, setToggleStatus] = useState({})

  // 统一的切换逻辑，传入当前项的唯一id
  const handleToggle = (itemId) => {
    setToggleStatus(prevState => ({
      ...prevState,
      // 若当前项无状态记录，默认初始状态为true，点击后取反
      [itemId]: !(prevState[itemId] ?? true)
    }))
  }

  return (
    <div className="App">
      {/* 遍历渲染时指定key，传入当前项的id */}
      {data.map(item => {
        // 无状态记录时默认显示Join按钮
        const isJoin = toggleStatus[item.id] ?? true
        return(
          <div className='container' key={item.id}>
            <h1>{item.name}</h1>
            {isJoin ?
              <button onClick={() => handleToggle(item.id)}>Join</button>
              :
              <button onClick={() => handleToggle(item.id)} >Request</button>
            }
          </div>
        )
      })}
    </div>
  );
}

适配无唯一id的场景 #

如果你的data数组中没有唯一id字段，可以临时使用遍历索引作为标识（仅数据列表不会动态新增/删除/排序时可用，否则会出现状态错位），修改遍历部分代码即可：

{data.map((item, index) => {
  const isJoin = toggleStatus[index] ?? true
  return(
    <div className='container' key={index}>
      <h1>{item.name}</h1>
      {isJoin ?
        <button onClick={() => handleToggle(index)}>Join</button>
        :
        <button onClick={() => handleToggle(index)} >Request</button>
      }
    </div>
  )
})}

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