React渲染列表中如何仅显示被点击项关联的按钮？

你的问题出在用单个布尔值状态控制所有按钮的显示——当startconv设为true时，所有按钮的判断条件startconv && ...都会成立，自然会全部显示。要实现点击某个div只显示对应按钮，需要让状态记录具体选中的用户标识，而非单纯的布尔值。

具体修改步骤： #

1. 把startconv的初始值从false改为null（或undefined），用来存储当前选中用户的唯一标识（这里用age，因为你已经把它作为key，保证唯一性）。
2. 修改handleclicker函数，点击时把状态设置为当前用户的age，而不是true。
3. 修改按钮的显示条件：判断startconv是否等于当前用户的age，而不是单纯判断startconv是否为真。

修改后的完整代码： #

import React, { useState } from 'react';

export function App(props) {
  // 初始值改为null，存储选中用户的age
  let [startconv, setStartconv] = useState(null);
  let current = [{name:'yaba1', age:20}, {name:'yaba2', age:23}]

  let handleclicker = (user) => {
    // 点击时设置为当前用户的age
    setStartconv(user.age);
    console.log(user);
  }

  return (
    <div className="online">
      {current.map((user) => (
        <div key={user.age}>
          <div 
            className="allonline" 
            style={{ border: 'blue 2px solid', marginBottom: '15px', width: '300px' }} 
            onClick={() => handleclicker(user)}
          >
            <div className="onlinepfpcont">
              <img alt=" " />
            </div>
            <span className="onlineusername" style={{ color: 'red' }}>{user.name}</span>
          </div>
          // 判断当前用户的age是否等于选中的标识
          {startconv === user.age && <button className="startconvobutton" >start {user.name}</button>}
        </div>
      ))}
    </div>
  );
}

额外优化（可选）： #

如果需要支持点击同一个div切换按钮的显示/隐藏，可以修改handleclicker函数：

let handleclicker = (user) => {
  // 如果当前选中的是这个用户，就取消选中；否则设置为这个用户的age
  setStartconv(prev => prev === user.age ? null : user.age);
}

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