React设置state后console.log显示[object Object]问题求助

问题分析 #

你遇到的情况有两种常见原因：

• React的setState是异步操作，直接在setEditExpense后打印状态，拿到的是更新前的旧值
• 打印时错误地将对象与字符串拼接，导致对象被自动转为[object Object]字符串

解决方案 #

1. 正确处理异步状态更新 #

因为React状态更新是异步的，要查看最新状态，需要用useEffect监听状态变化：

// App.jsx中添加
import { useEffect, useState } from 'react';

function App() {
  const [editExpense, setEditExpense] = useState({});

  function handleEditClick(expense) {
    setEditExpense(expense);
  };

  // 监听editExpense变化，打印最新值
  useEffect(() => {
    console.log('最新的editExpense:', editExpense);
  }, [editExpense]);

  // ...其他代码
}

2. 避免字符串拼接导致的对象转义 #

如果是在其他地方打印时出现[object Object]，检查打印方式：

• 错误写法（会导致对象转字符串）：

  console.log('编辑的费用：' + editExpense);
  

• 正确写法（用逗号分隔，保留对象结构）：

  console.log('编辑的费用：', editExpense);
  

• 或者用JSON.stringify格式化打印：

  console.log('编辑的费用：', JSON.stringify(editExpense, null, 2));
  

额外验证：确认参数传递正确 #

从你的代码看，Expense.jsx中传递的对象是正确的：

<IconButton onClick={()=>handleEditClick({expense, description, amount})} color="secondary">
  <EditIcon/>
</IconButton>

这里传递的是包含expense、description、amount的对象，父组件接收后状态设置没问题，只是打印时机或方式的问题。

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