React map循环中点击按钮仅显对应消息（不使用多useState）

核心思路是把单个布尔值的状态改成存储当前要显示的消息唯一标识（比如ID或标题，只要能区分不同消息就行），这样点击按钮时只标记对应消息的标识，渲染时只显示匹配该标识的消息。

修改后的代码如下：

import { useState } from "react";
import { messages } from "./messagesData";

export default function App() {
  // 用null初始化，表示初始无消息显示；存储当前要显示的消息ID/title
  const [activeMessageId, setActiveMessageId] = useState(null);

  // 接收消息标识作为参数，设置激活状态
  function showMessage(messageId) {
    // 如果点击的是已激活的消息，可以切换隐藏，不需要的话直接setActiveMessageId(messageId)即可
    setActiveMessageId(prevId => prevId === messageId ? null : messageId);
  }

  const renderedMessages = messages.map(message => (
    <div key={message.id}> {/* 记得加key，React列表渲染要求 */}
      {/* 判断当前消息的标识是否等于激活状态，决定显示/隐藏 */}
      <div className={activeMessageId !== message.id ? "d-none" : "d-block"}>
        {message.title}
      </div>
      <button onClick={() => showMessage(message.id)}> 
        显示 {message.title} 消息
      </button>
    </div>
  ));

  return (
    <div>
      {renderedMessages}
    </div>
  );
}

关键修改点： #

• 状态类型调整：从boolean改为存储消息的唯一标识（这里假设messages数组里的每个元素都有id字段，如果没有可以用title，只要保证唯一）。
• 点击事件传参：点击按钮时把当前消息的标识传递给showMessage函数，精准控制要激活的消息。
• 渲染判断逻辑：每个消息块只对比自身标识和状态值，只有匹配时才显示。

如果不需要点击已显示的消息来隐藏，直接把showMessage函数改成setActiveMessageId(messageId)即可。

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