React组件Props更新与本地状态同步：解决数据残留问题

// MyTickets.js (父组件部分代码)
function handleClick(ticket) {
  setSelectedTicket(ticket); // 更新selectedTicket状态
}

return (
  // ...
  <TicketDetails
    ticket={selectedTicket} // 将selectedTicket作为prop传递给子组件
    refreshTickets={refreshTickets}
  />
  // ...
);

// TicketDetails.js (子组件部分代码，问题所在)
const TicketDetails = ({ ticket, refreshTickets }) => {
  const [edit, setEdit] = useState(false);
  const [title, setTitle] = useState(ticket.title); // 首次渲染时初始化
  const [initialTitle, setInitialTitle] = useState(ticket.title); // 首次渲染时初始化
  const [description, setDescription] = useState(ticket.description); // 首次渲染时初始化
  const [descriptionInit, setDescriptionInit] = useState(ticket.description); // 首次渲染时初始化
  // ...
};

// TicketDetails.js (更新后的子组件代码)
import React, { useEffect, useState } from "react";
import styled from "styled-components";

// ... 其他 styled-components 定义 ...

const TicketDetails = ({ ticket, refreshTickets }) => {
  const [edit, setEdit] = useState(false);
  const [title, setTitle] = useState(ticket.title);
  const [initialTitle, setInitialTitle] = useState(ticket.title);
  const [description, setDescription] = useState(ticket.description);
  const [descriptionInit, setDescriptionInit] = useState(ticket.description);

  // 使用 useEffect 监听 ticket prop 的变化，并在变化时更新本地状态
  useEffect(() => {
    setTitle(ticket.title);
    setInitialTitle(ticket.title);
    setDescription(ticket.description);
    setDescriptionInit(ticket.description);
  }, [ticket]); // 将 ticket 添加为依赖项

  const handleSubmit = (e) => {
    e.preventDefault();
    fetch(`/tickets/${ticket.id}`, {
      method: "PUT",
      headers: { "Content-Type": "application/json" },
      body: JSON.stringify({ title: title, description: description }),
    })
      .then((r) => r.json())
      .then((d) => {
        console.log("updated ticket", d);
        // 更新本地状态以反映服务器返回的最新数据
        setTitle(d.title);
        setDescription(d.description);
        refreshTickets(); // 刷新父组件的票据列表
      });
    setEdit(false);
  };

  const handleReset = (e) => {
    setTitle(initialTitle);
    setDescription(descriptionInit);
  };

  const handleCancel = (e) => {
    setTitle(initialTitle);
    setDescription(descriptionInit);
    setEdit(false);
  };

  return (
    <>
      {/* 类别显示 */}
      <Category>{categories[ticket.category_id - 1]}</Category>
      <Gradient></Gradient>
      {edit ? (
        // 编辑模式下的表单
        <Container
          style={{
            backgroundColor: "#B1D4E0",
          }}
        >
          <form onSubmit={handleSubmit} onReset={handleReset}>
            <Input
              type="text"
              id="title"
              autoComplete="off"
              value={title}
              onChange={(e) => setTitle(e.target.value)}
            />
            <Gradient></Gradient>
            <TextArea
              type="text"
              id="description"
              autoComplete="off"
              value={description}
              onChange={(e) => setDescription(e.target.value)}
            />
            <input type="submit" value="Submit" />
            <input type="reset" value="Reset" />
            <button onClick={handleCancel}>Cancel</button>
          </form>
        </Container>
      ) : (
        // 显示模式下的票据详情
        <Container
          style={{
            backgroundColor: "#B1D4E0",
          }}
        >
          <Title>{ticket.title}</Title>
          <Gradient></Gradient>
          <ContentContainer>
            <Description>{ticket.description}</Description>
          </ContentContainer>
          <ButtonContainer>
            <EditButton onClick={() => setEdit(true)}>Edit</EditButton>
          </ButtonContainer>
        </Container>
      )}
    </>
  );
};

export default TicketDetails;