问题背景：子组件状态未同步Props
在react应用开发中，一个常见的场景是父组件根据用户交互选择一个数据对象，并将其作为props传递给子组件进行展示或编辑。例如，在一个票据管理应用中，mytickets组件负责展示票据列表并允许用户选择，而ticketdetails组件则负责显示和编辑选定票据的详细信息。
TicketDetails组件通常会将其接收到的ticket Props中的数据（如title和description）初始化为自身的内部状态，以便用户进行编辑。然而，当用户在MyTickets组件中切换选择不同的票据时，尽管TicketDetails组件接收到了新的ticket Props，其内部的title和description状态却可能不会随之更新，导致显示或编辑的仍然是之前票据的信息。
例如，TicketDetails组件的初始状态设置可能如下：
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组件会继续显示第一张票据被编辑后的标题，而不是第二张票据原始的标题。这是因为useState的初始化特性导致了数据不一致。
问题根源：useState的单次初始化特性
React的useState钩子在组件的生命周期中有一个关键特性：它的初始化函数（即useState()中传入的参数）只在组件首次渲染时执行一次。这意味着，即使组件的Props在后续渲染中发生了变化，useState所维护的状态也不会自动重新从这些新的Props值中获取初始值。
当MyTickets组件通过setSelectedTicket(ticket)更新selectedTicket状态时，TicketDetails组件会接收到新的ticket Props并重新渲染。然而，TicketDetails内部的useState(ticket.title)等语句不会再次执行以获取新的ticket.title。它们会继续使用之前已经初始化的状态值，从而导致内部状态与外部Props之间的数据脱节。
解决方案：利用useEffect同步Props到状态
为了解决这个问题，我们需要一种机制来监听Props的变化，并在Props发生变化时，手动更新子组件的内部状态。React的useEffect钩子正是为此目的而设计的。
useEffect允许我们在组件渲染后执行副作用操作。通过将Props作为useEffect的依赖项，我们可以确保当这些Props发生变化时，特定的副作用逻辑会被重新执行。
具体来说，我们可以在TicketDetails组件中使用useEffect来监听ticket Props的变化。一旦ticket对象发生变化（即引用发生改变），useEffect的回调函数就会被触发，此时我们可以在回调函数中将内部状态重新设置为新ticket Props的值。
代码实现与解析
以下是TicketDetails组件中引入useEffect来同步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);
// 使用 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 ? (