问题分析：Props与内部状态的脱钩
在react函数组件中，我们经常使用usestate来管理组件的内部状态。当这个内部状态的初始值来源于组件的props时，例如在一个票据详情组件ticketdetails中，title和description状态由ticket.title和ticket.description初始化：
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
// ...
};这种初始化方式仅在组件首次渲染（挂载）时执行一次。这意味着，如果父组件MyTickets通过setSelectedTicket更新了selectedTicket，并将其作为ticket prop传递给TicketDetails，即使ticket prop的值发生了变化，TicketDetails组件内部的title、initialTitle、description和descriptionInit这些状态并不会自动更新。它们仍然保留着组件首次接收到的ticket prop的值。
因此，当用户编辑一个票据，然后点击另一个票据时，虽然父组件正确地更新了selectedTicket，但TicketDetails组件由于其内部状态未同步，仍然显示的是上一个票据的编辑信息，或者在编辑模式下，输入框会显示旧数据。
解决方案：使用useEffect同步状态
为了解决props变化后内部状态不同步的问题，我们需要使用React的useEffect Hook。useEffect允许我们在函数组件中执行副作用操作，例如数据获取、订阅或手动更改DOM。更重要的是，它提供了一种机制来响应组件生命周期事件，包括props或状态的变化。
通过将ticket prop作为useEffect的依赖项，我们可以确保每当ticket prop发生变化时，useEffect回调函数就会重新执行，从而有机会更新组件内部的状态。
代码实现
在TicketDetails组件中，添加一个useEffect Hook，如下所示：
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 内容保持不变 ...
<>
{categories[ticket.category_id - 1]}