问题

您正在使用单个布尔edit状态值来触发所有映射元素的编辑模式。

解决方案

使用一些edit可以与数据相关联的状态，例如索引或项目id属性。由于我没有看到使用任何 GUID，因此我将使用 index.html 进行演示。

1. 使用元素索引来标识处于“编辑”模式的内容，null 表示没有任何内容具有“编辑”模式。

    const [editIndex, setEditIndex]= useState(null);
   

2. 如果单击同一按钮，则更新切换按钮以切换新索引或返回 null

    <Button
      size="small"
      onClick={() => setEditIndex(editIndex => editIndex === index ? null : index)}
    >
      Edit
    </Button>
   

3. 将保存的editIndex状态与当前映射的元素匹配以有条件地呈现消息。

    {editIndex === index && <h1>Want to see this in only one card</h1>}
   

附加说明

我看到你有一个删除按钮：

<Button size="small" onClick={()=> deleted(oneitem._id)} >Delete</Button>

如果要删除从底层的数据元素，那么你会希望不为阵营键使用数组索引。相反，您应该使用_id每个元素的唯一标识属性，例如，（它们只需要在兄弟姐妹中是唯一的）。因此，不是使用索引来设置“编辑”模式，_id而是使用。

之所以会出现这个问题，是因为您在整个地图中使用了一个通用的编辑值。因此，如果您将“edit”的主要值更改为“true”（在本例中），它会将所有卡片的编辑视为 true。

不，这是您可以尝试执行的操作（我正在考虑一次只能编辑一张卡片）而不是将编辑保留为布尔值 (true|false) 将其用作整数值来存储卡片的索引在你的数组中。

脚步 ：

1. 默认保持编辑=空
2. setEdit 函数可以变成这样：（考虑基于类的状态）

setEdit(editVal) => {
  if(this.state.edit === editVal){
    this.setState({
      edit: null
      })
  }
  else{
    this.setState({
      edit: editVal
    }
  }
}

3. 并在调用 setEdit 方法时像这样调用它：

onClick={()=> setEdit(index)}

4. 现在，每次单击编辑按钮时，编辑值都会更改为新的索引值或空值。

5. 最后一个变化是替换这个：

{edit && <h1>Want to see this in only one card</h1>}

有了这个

{edit===index && <h1>Want to see this in only one card</h1>}

结论：

我们首先将编辑值移动到整数或空值，然后在单击编辑时将数组中元素的索引值分配给“编辑”。一旦发生这种情况，我们将检查编辑值是否等于索引值（步骤 5），如果是，则仅显示该卡片的消息。再次单击编辑后，“编辑”的值变为空（如果单击同一张卡片）。