React组件Props更新时内部状态不同步的解决方案：使用useEffect

const TicketDetails = ({ ticket, refreshTickets }) => {
  const [edit, setEdit] = useState(false);
  const [title, setTitle] = useState(ticket.title); // 初始值来自props
  const [initialTitle, setInitialTitle] = useState(ticket.title); // 初始值来自props
  const [description, setDescription] = useState(ticket.description); // 初始值来自props
  const [descriptionInit, setDescriptionInit] = useState(ticket.description); // 初始值来自props
  // ...
};

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);

  // 当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);
        // 同时更新initialTitle和descriptionInit以反映最新提交
        setInitialTitle(d.title);
        setDescriptionInit(d.description);
        refreshTickets();
      });
    setEdit(false);
  };

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

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

  return (
    // ... JSX 内容保持不变 ...
    <>
      <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;