ReactJS中解决通过map方法渲染的按钮点击后全部文本同步变更的问题

我懂你现在的困扰——点击任意按钮后所有按钮的文本都同步变成"Selected"，这是因为你用了一个全局的btnText状态来控制所有按钮的显示内容，所有按钮都绑定了同一个变量，当然会一起变化啦。下面给你两种实用的解决办法，都能实现「只有点击的按钮才更新文本」的需求：

方案1：用单个状态记录选中的按钮ID（改动最小，适合简单场景） #

这个思路是把状态从「按钮文本」改成「选中的按钮ID」，渲染的时候动态判断每个按钮是否被选中，从而决定显示什么文本。改动非常小，贴合你现有的代码结构：

const TestPage = () =>{
  let buttons = [
    {name:'Select1', id:1},
    {name:'Select2', id:2},
    {name:'Select3', id:3}
  ]
  // 记录选中的按钮ID，初始为null表示没有按钮被选中
  const [selectedBtnId, setSelectedBtnId] = useState(null)
  
  // 点击时传入当前按钮的ID，更新选中状态
  const handleClick = (btnId) =>{
    setSelectedBtnId(btnId)
  }

  return(
    <div>
      {!!buttons && buttons.map(item =>{
        // 动态判断：当前按钮ID等于选中ID时显示"Selected"，否则显示"Select"
        const buttonText = selectedBtnId === item.id ? 'Selected' : 'Select'
        return(
          <p key={item.id}>
            <Button 
              btnType='button' 
              btnText={buttonText} 
              // 点击时把当前按钮的ID传递给处理函数
              clickHandler={() => handleClick(item.id)} 
            />
          </p>
        )
      })}
    </div>
  )
}
export default TestPage;

如果之后需要支持多选功能，只需要把selectedBtnId改成数组，点击时添加/移除对应ID即可，灵活性很高。

方案2：封装独立的按钮组件（适合复杂交互场景） #

如果以后每个按钮需要更多独立的逻辑（比如单独的样式切换、额外状态管理），把按钮封装成独立组件会更清晰——每个按钮自己维护选中状态，互不干扰：

首先创建一个自定义按钮组件：

const CustomButton = ({ initialText = 'Select' }) => {
  // 每个按钮自己维护选中状态
  const [isSelected, setIsSelected] = useState(false)
  
  const handleClick = () => {
    // 如果需要切换选中状态（点击切换Selected/Select）就用这个
    setIsSelected(!isSelected)
    // 如果只需要点击后固定显示"Selected"，改成setIsSelected(true)即可
  }

  return (
    <Button 
      btnType='button' 
      btnText={isSelected ? 'Selected' : initialText} 
      clickHandler={handleClick} 
    />
  )
}

然后在TestPage中使用这个组件：

const TestPage = () =>{
  let buttons = [
    {name:'Select1', id:1},
    {name:'Select2', id:2},
    {name:'Select3', id:3}
  ]

  return(
    <div>
      {!!buttons && buttons.map(item =>{
        return(
          <p key={item.id}>
            <CustomButton initialText={item.name} />
          </p>
        )
      })}
    </div>
  )
}
export default TestPage;

这种方式的优点是组件职责单一，扩展性强，按钮的独立逻辑都封装在自己的组件里，不会影响其他按钮。

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