React子组件状态与Props同步：解决点击切换数据时状态未更新的问题

function handleClick(ticket) {
  setSelectedTicket(ticket); // 更新 selectedTicket 状态
}

// ...
<TicketDetails
  ticket={selectedTicket} // selectedTicket 作为 prop 传递给 TicketDetails
  refreshTickets={refreshTickets}
/>

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); // 首次渲染时初始化
  // ...
};

import React, { useState, useEffect } from "react"; // 导入 useEffect
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); // 同步初始描述，用于重置/取消操作
    setEdit(false); // 当切换票据时，确保编辑模式关闭
  }, [ticket]); // 依赖项数组包含 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;