React useEffect钩子触发时获取旧selectedPerson值问题求助

方案一：直接推导标题，无需额外状态 #

最可靠的方式是去掉summaryTitle这个独立状态，因为它完全可以通过selectedPerson直接计算得出，从根源上避免状态不同步的问题：

const [selectedPerson, setSelectedPerson] = useState({});

const onSelectPerson = (person) => {
  setSelectedPerson(person);
};

// 渲染时直接计算标题，selectedPerson更新后会自动重新计算
const summaryTitle = selectedPerson.firstName && selectedPerson.lastName 
  ? `${selectedPerson.firstName} ${selectedPerson.lastName}` 
  : "";

方案二：设置选中状态时同步更新标题 #

如果必须单独维护summaryTitle状态，也不需要依赖useEffect——在onSelectPerson里你已经拿到了最新的person对象，直接用它更新标题即可：

const [selectedPerson, setSelectedPerson] = useState({});
const [summaryTitle, setSummaryTitle] = useState("");

const onSelectPerson = (person) => {
  setSelectedPerson(person);
  // 直接使用当前传入的最新person设置标题，跳过useState异步更新的等待
  setSummaryTitle(`${person.firstName} ${person.lastName}`);
};

关于原问题的说明 #

你遇到的useEffect拿到旧值的情况，通常是因为组件存在其他逻辑导致selectedPerson的更新时机延迟，或者传入的person对象引用未发生变化（比如复用了同一个对象修改属性），导致useEffect未正确触发。但上面两种方案都能绕开这类问题，比依赖useEffect更简洁可靠。

内容的提问来源于stack exchange，提问作者Kfir