React中Props更新导致子组件状态不同步的useEffect解决方案

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, { 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 Props 的变化，并同步到内部状态
  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();
        // 更新 initialTitle 和 descriptionInit 以反映最新的保存状态
        setInitialTitle(d.title);
        setDescriptionInit(d.description);
      });
    setEdit(false);
  };

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

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

  return (
    // ... JSX 渲染逻辑
    <>
      {/* ... */}
      {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>{title}</Title> {/* 这里也应该使用内部状态title */}
          <Gradient></Gradient>
          <ContentContainer>
            <Description>{description}</Description> {/* 使用内部状态description */}
          </ContentContainer>
          <ButtonContainer>
            <EditButton onClick={() => setEdit(true)}>Edit</EditButton>
          </ButtonContainer>
        </Container>
      )}
    </>
  );
};

export default TicketDetails;