React中子组件状态与父组件Props同步的最佳实践

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初始化

  // ... 其他逻辑和JSX
};

import React, { useState, useEffect } 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;