多Address组件渲染时如何实现仅一个组件的showEditAddress状态为true

你当前的实现是用单个布尔值控制所有组件的编辑状态，自然没法区分不同组件的激活状态，只需要把状态从布尔值替换为「当前处于编辑状态的条目标识」即可，调整步骤如下：

1. 替换状态定义 #

把原来的布尔类型状态替换为存储当前激活编辑条目的唯一标识，没有激活条目时值为null：

// 优先用useraddress的唯一id，暂时没有的话可以先用索引
const [activeEditId, setActiveEditId] = useState(null);

2. 重写切换逻辑 #

切换时接收当前点击条目的唯一标识，判断是否和当前激活值一致：一致就关闭编辑状态，不一致就切换为当前点击的条目：

const switchEditAddress = (targetId) => {
  setActiveEditId(prev => prev === targetId ? null : targetId);
};

3. 渲染时给子组件透传对应状态 #

遍历渲染时给每个Address组件传入独有的状态判断结果和绑定了当前条目标识的切换方法：

{userAddresses.map((useraddress, index) => {
  // 有真实id就用useraddress.id，不要用index
  const currentId = useraddress.id ?? index;
  return (
    <div key={currentId}>
      <Address 
        useraddress={useraddress}
        showEditAddress={activeEditId === currentId}
        onToggleEdit={() => switchEditAddress(currentId)}
      />
    </div>
  );
})}

4. 调整Address组件内部逻辑 #

删除Address组件内部的showEditAddress本地状态，直接使用父组件传入的showEditAddress prop，触发编辑切换时调用传入的onToggleEdit方法即可。

注意：如果你的地址列表会有增删、排序操作，一定不要用索引作为唯一标识，必须用地址数据自带的唯一id，否则会出现状态匹配错误的问题。

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