为何执行console.log(title)输出旧值，但浏览器中ExpenseItem组件UI已更新？

你遇到的这个情况是React中非常典型的异步state更新特性导致的，咱们先拆解下问题根源：

首先看你的代码片段：

const ExpenseItem = (props) => { 
  const [title, setTitle] = useState(props.title); 
  const date = props.date; 
  const amount = props.amount; 
  function clickHandler(){ 
    setTitle("Updated"); 
    console.log(title); // 这里输出旧值
  } 
  return ( 
    <Card className='expense-item'> 
      <ExpenseCalender month = {date.toLocaleString("default", {month: "long"})} day = {date.toLocaleString("default", {day: "2-digit"})} year = {date.getFullYear()} /> 
      <div className='expense-item__description'> 
        <h2>{title}</h2> 
        <div className='expense-item__price'>{`$${amount}`}</div> 
      </div> 
      <button onClick={clickHandler}>Change title</button> 
    </Card> 
  ) 
}

为什么会出现这种情况？ #

有两个核心原因：

1. React的state更新是异步批量处理的：调用setTitle("Updated")后，React不会立刻修改title变量，而是把这个更新请求加入到更新队列中，等当前事件循环的所有同步代码执行完毕后，才会批量更新状态并触发组件重新渲染。所以你在setTitle后立刻console.log(title)，拿到的还是更新前的旧值。
2. 闭包捕获的是当前渲染周期的state：clickHandler函数是在组件某次渲染时创建的，它闭包捕获了当时的title值。即使后续state更新导致组件重新渲染，旧的clickHandler里的title依然是之前渲染时的旧值。

怎么解决这个问题？ #

这里有两种常用的方案，根据你的需求选择：

方案1：用useEffect监听state变化

如果你想在title更新完成后执行日志或其他逻辑，可以使用useEffect来监听title的变化，当title发生改变时，effect会自动触发：

import { useState, useEffect } from 'react';

const ExpenseItem = (props) => { 
  const [title, setTitle] = useState(props.title); 
  const date = props.date; 
  const amount = props.amount; 

  // 监听title变化，更新后执行日志
  useEffect(() => {
    console.log("当前最新的title:", title);
  }, [title]); // 依赖数组中加入title，仅当title变化时执行

  function clickHandler(){ 
    setTitle("Updated"); 
  } 

  return ( 
    // 组件JSX部分不变
  ) 
}

方案2：使用函数式更新（需依赖旧state时）

如果你的新state需要基于旧state计算，或者想在更新逻辑里直接获取新值，可以给setTitle传递一个函数，这个函数会接收最新的旧state作为参数，你可以在函数内部处理逻辑并返回新state：

function clickHandler(){ 
  setTitle(prevTitle => {
    const newTitle = "Updated";
    console.log("即将设置的新title:", newTitle);
    return newTitle;
  }); 
}

总结 #

记住React的state更新是异步的，不要在调用setState后立刻期望state变量同步变化。如果需要在state更新后执行逻辑，优先使用useEffect监听；如果更新逻辑依赖旧state，就用函数式更新的方式。

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