理解React中Props与State的同步问题
在react函数组件中，usestate钩子用于管理组件的内部状态。当usestate的初始化函数被调用时，它只在组件的首次渲染时执行一次。这意味着，如果子组件的内部状态是根据父组件传递的props初始化的，并且这些props在后续渲染中发生了变化，子组件的内部状态并不会自动更新以反映这些新的props值。
考虑一个场景：一个MyTickets组件管理着一个工单列表和当前选中的工单。当用户点击不同的工单时，MyTickets会将选中的工单对象作为selectedTicket属性传递给TicketDetails子组件。TicketDetails组件内部维护着title和description等状态，这些状态最初是从ticket.title和ticket.description初始化的，以便用户可以编辑它们。
原始代码片段示例 (TicketDetails 组件):
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
};当用户编辑一个工单并保存后，如果他们随后点击另一个工单，TicketDetails组件会接收到新的ticket prop。然而，由于useState的初始化逻辑不会再次运行，title、initialTitle、description和descriptionInit这些内部状态变量仍然保留着上一个工单的值。这导致了一个数据不同步的问题：子组件显示和编辑的是旧工单的信息，而不是当前选中的工单。
解决方案：使用useEffect钩子同步内部状态
为了解决这个问题，我们需要在ticket prop发生变化时，显式地更新TicketDetails组件内部的状态。useEffect钩子是实现这一目标的首选方法。
useEffect允许我们在组件渲染后执行副作用，例如数据获取、订阅或手动更改DOM。通过在useEffect的依赖数组中包含ticket prop，我们可以确保每当ticket prop引用发生变化时，useEffect的回调函数都会被重新执行。
修正后的代码片段示例 (TicketDetails 组件):
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 (
<>
{categories[ticket.category_id - 1]}