为什么"console.log(title)"将旧输出作为标题，尽管在浏览器中更改了费用项目 UI？

Question

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>
)
}

预期console.log(title(将输出为"更新的">

但它呈现的是旧标题，即道具中的标题数据。

Answer 1

正如@Kevin Bui在评论中所说

setTitle((是异步的，这意味着在您控制台日志状态时，它还没有更新

这意味着在下一行中，您将不会获得更新的值。换句话说，它不等待更新值，然后转到下一行。

所以这里发生的是。如果你在settle((后面console.log，它会给你旧的状态。

解决方案1：在函数外的任何地方登录通常我会在返回语句前保存所有日志

console.log(title)
return (
.........
)

解决方案2：使用useEffect((挂钩

useEffect(() => {
// action on update of title
}, [title]);

解决方案3：使用简单变量而不是usestate((

const title = props.title;

要了解更多关于问题解决方案的信息，请访问此处