React Native：获取选中TouchableOpacity的ID以删除条目问题求助

你的问题核心出在三个地方：用数组索引作为组件key、点击事件参数传递错误、删除逻辑未正确更新状态。以下是具体修复步骤：

1. 替换map的key为唯一ID #

你当前用index作为BookItem的key，删除条目后数组索引会重新排列，React会复用旧组件导致状态混乱。直接用每个图书的唯一id作为key：

修改父组件中的map渲染部分：

{books.map((book) => (
  <BookItem 
    key={book.id} 
    bookId={book.id} 
    name={book.name} 
    description={book.description} 
    updatedAt={book.updatedAt} 
  />
))}

2. 正确传递点击事件的参数 #

当前TouchableOpacity的onPress直接绑定deleteItem，没有传递bookId，导致函数无法拿到正确的目标ID。需要用箭头函数包裹传递参数：

修改子组件的TouchableOpacity：

<TouchableOpacity onPress={() => deleteItem(bookId)}>
  <Text>{name}</Text>
  <Text>{description}</Text>
  <Text>{updatedAt}</Text>
</TouchableOpacity>

3. 实现正确的删除逻辑并更新父组件状态 #

删除操作需要通知父组件更新books数组，所以子组件需要接收一个删除回调函数，而非自行处理删除逻辑。

子组件修改： #

// 更新props类型，添加删除回调
type BookItemProps = {
  name: string;
  description: string;
  bookId: string;
  updatedAt: string;
  onDelete: (id: string) => void;
}

export default function BookItem({ name, description, bookId, updatedAt, onDelete }: BookItemProps) {
  return(
    <TouchableOpacity onPress={() => onDelete(bookId)}>
      <Text>{name}</Text>
      <Text>{description}</Text>
      <Text>{updatedAt}</Text>
    </TouchableOpacity>
  )
}

父组件修改： #

添加删除函数并传递给BookItem：

// 父组件中实现删除逻辑
const handleDelete = (bookId: string) => {
  // 过滤掉要删除的条目，更新状态
  setBooks(prevBooks => prevBooks.filter(book => book.id !== bookId));
}

// 在map中传递onDelete回调
{books.map((book) => (
  <BookItem 
    key={book.id} 
    bookId={book.id} 
    name={book.name} 
    description={book.description} 
    updatedAt={book.updatedAt}
    onDelete={handleDelete}
  />
))}

4. 统一props类型（可选但推荐） #

父组件中的BookProps和子组件的BookItemProps可以统一，避免类型混淆：

// 父组件定义统一的图书类型
type Book = {
  id: string;
  name: string;
  description: string;
  updatedAt: string;
  authorId: string;
}

const [books, setBooks] = useState<Book[]>([])

// 子组件复用类型，只取需要的字段加回调
export default function BookItem({ name, description, bookId, updatedAt, onDelete }: Pick<Book, 'name' | 'description' | 'updatedAt'> & { bookId: string, onDelete: (id: string) => void }) {
  // ...组件内容
}

完成以上修改后，每次删除条目都会正确更新数组，后续点击也能获取到正确的图书ID，不会再出现旧ID残留的问题。

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