React点击切换不同工单div时状态跟踪异常问题

你怀疑的handleClick函数本身逻辑没有错误，故障来自两个React状态同步的典型疏漏，直接导致编辑后切换工单时数据串流：

• 子组件TicketDetails的本地状态（title、description、编辑态标记等）仅在组件首次挂载时，用传入的ticket属性做初始化。后续父组件传入新的选中工单时，这些本地状态不会自动跟随props更新，会一直残留上一个工单编辑后的值。
• 工单列表渲染时使用数组下标index作为节点key，React依赖key判断是否复用组件实例，下标作为key会触发错误的组件复用，进一步加剧状态错乱。
• 额外隐患：直接把数组内的工单对象引用存入selectedTicket状态，后续如果直接修改选中工单对象属性，会意外污染原tickets数组内的数据。

1. 修正列表key的错误用法 #

将列表项的key从数组下标替换为工单唯一ID，避免React错误复用组件实例：

// 修改MyTickets组件中的工单列表渲染逻辑
{tickets.map((ticket, index) => {
  return (
    <Ticket key={ticket.id} onClick={() => handleClick(ticket)}>
      {index + 1}: {limitChars(ticket.title)}
    </Ticket>
  );
})}

2. 增加props变更同步逻辑 #

在TicketDetails组件中新增副作用监听，每次传入的ticket变化时，重置所有本地状态和新工单数据对齐，同时自动退出编辑态避免残留：
首先修改组件的React引入，加入useEffect：

import React, { useState, useEffect } from "react";

然后在组件内的状态声明后添加同步逻辑：

useEffect(() => {
  setTitle(ticket.title);
  setInitialTitle(ticket.title);
  setDescription(ticket.description);
  setDescriptionInit(ticket.description);
  setEdit(false);
}, [ticket]);

3. 切断对象引用关联（可选但推荐） #

修改handleClick逻辑，存入选中状态时对工单对象做浅拷贝，避免后续操作意外修改原数组数据：

function handleClick(ticket) {
  setSelectedTicket({...ticket});
}

完成以上修改后，切换工单时组件状态会和新选中的工单完全对齐，不会再出现编辑后的数据串到其他工单的问题。

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