React中useState传参显示[object object]问题求助

核心原因 #

页面显示[object object]本质是把对象直接当作字符串渲染，或是状态中存储的值并非预期的字符串类型。以下是针对性的排查和解决步骤：

1. 检查输入框的状态更新逻辑 #

这是最常见的错误点：

• 错误示例（直接存储事件对象而非输入值）：

// Navbar.js 错误代码
const [searchText, setSearchText] = useState('');
const handleInputChange = (e) => {
  setSearchText(e); // 存储了整个event对象，而非输入框的字符串值
};

• 正确写法：

const handleInputChange = (e) => {
  // 取出输入框的实际文本值
  setSearchText(e.target.value);
};

如果你的状态是对象类型（比如useState({ name: '' })），更新时要正确维护对象结构：

const handleInputChange = (e) => {
  setSearchText(prevState => ({
    ...prevState,
    name: e.target.value // 仅更新name字段为输入值
  }));
};

2. 检查组件间的参数传递与渲染 #

• 如果父组件传递的是对象，子组件必须渲染对象的具体属性，而非整个对象：

// App.js 传递对象状态
<SearchView searchText={searchText} />

// SearchView.js 错误渲染（直接渲染对象）
<div>{searchText}</div> // 会显示[object object]

// 正确渲染（取对象的字符串属性）
<div>{searchText.name}</div>

3. 用console.log定位问题 #

在状态更新后、组件渲染前打印值，确认数据类型和内容：

// 在handleInputChange里打印
const handleInputChange = (e) => {
  console.log('输入值:', e.target.value); // 确认是字符串
  setSearchText(e.target.value);
};

// 在组件中打印当前状态
console.log('当前searchText:', searchText); // 查看是字符串还是对象，值是否正确

通过以上步骤，就能快速定位是状态存储错误，还是渲染/传递时的问题。

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