React点击修改文本失效问题：页面未更新但Console.log有变化

• 核心问题：你在组件里维护了title状态，但渲染页面时用的是props.title，而非状态中的title。点击按钮后状态确实更新了，但页面没有引用这个状态值，所以不会触发重新渲染显示新内容。
• 次要问题：console.log(title)会显示旧值，因为React的setState是异步更新状态的，同步代码里无法立即获取更新后的状态。

修复后的代码 #

import React, { useState } from 'react';
import ExpenseDate from './ExpenseDate';
import Card from '../UI/Card';
import './ExpenseItem.css';

function ExpenseItem(props) {
  const [title, setTitle] = useState(props.title);

  const clickHandler = () => {
    setTitle('Updated!');
    // 若要查看更新后的状态，可通过useEffect监听
    // useEffect(() => console.log(title), [title]);
  };

  return (
    <Card className='expense-item'>
      <ExpenseDate date={props.date}></ExpenseDate>
      <div className='expense-item__description'>
        {/* 将props.title替换为状态中的title */}
        <h2>{title}</h2>
        <div className='expense-item__price'>${props.amount}</div>
      </div>
      <button onClick={clickHandler}>Change title</button>
    </Card>
  );
}

export default ExpenseItem;

• 关键修改点：把<h2>{props.title}</h2>替换为<h2>{title}</h2>，让页面引用组件内部维护的状态值，这样状态更新时页面才会同步渲染新内容。
• console.log说明：如果需要在状态更新后查看最新值，建议使用useEffect监听title状态变化，在回调中打印——因为setState是异步更新，同步执行的console.log无法获取刚更新的状态。

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