React/TS从数组渲染新DOM元素报错：Objects are not valid as a React child

嘿，这个报错我太熟了！Objects are not valid as a React child 说白了就是React在吐槽：“你让我渲染一个对象/数组？我可做不到，我只能渲染字符串、数字这种基本类型，或者正经的React组件/元素啊！”

结合你要做的功能（搜索词列表+点击展示结果），我帮你排查几个最容易踩的坑：

1. 搜索词列表的渲染方式错了 #

假设你之前是直接把items数组扔到JSX里，比如：

<div>{this.state.items}</div>

这肯定会炸！因为items是存搜索词的数组，你得遍历它，把每个搜索词转换成可渲染的元素，比如：

<ul className="search-term-list">
  {this.state.items.map((term, index) => (
    <li 
      key={index} 
      onClick={() => this.showSearchResults(term)}
      style={{cursor: 'pointer'}}
    >
      {term} {/* 这里确保term是字符串，不是对象！ */}
    </li>
  ))}
</ul>

要是你存的搜索词是对象（比如{id: 1, term: "React"}），那得渲染对象的属性，比如{term.term}，不能直接扔整个对象。

2. 不小心把DOM对象存进了状态里 #

看你代码里的输入框，要是你在点击搜索按钮时，直接把输入框元素本身存进items，那也会触发这个错误：

// 错误示例：存了DOM对象，不是搜索词字符串
handleAddSearch = () => {
  const input = document.getElementById('tbx_Search');
  this.setState(prev => ({
    items: [...prev.items, input] // 这里input是DOM对象，不是字符串！
  }));
}

正确的做法是取输入框的value：

handleAddSearch = () => {
  const input = document.getElementById('tbx_Search');
  const searchTerm = input.value.trim();
  if (searchTerm) {
    this.setState(prev => ({
      items: [...prev.items, searchTerm]
    }));
    input.value = ''; // 清空输入框
  }
}

3. 展示搜索结果时直接渲染了对象/数组 #

当你点击搜索词获取结果后，要是this.state.searchResults是对象或者数组，直接渲染{this.state.searchResults}肯定不行。比如结果是数组的话，得遍历：

{this.state.searchResults && (
  <div className="results-container">
    {this.state.searchResults.map(result => (
      <div key={result.id} className="result-card">
        <h3>{result.title}</h3>
        <p>{result.content}</p>
      </div>
    ))}
  </div>
)}

要是结果是单个对象，就渲染它的具体属性，比如{result.title}，别直接扔整个对象。

4. 错误信息的渲染也可能踩坑 #

如果你的代码里有渲染error的逻辑，比如：

{this.state.error && <div>出错了：{this.state.error}</div>}

要是error是Error对象，直接渲染它也会报错，得取message属性：

{this.state.error && <div>出错了：{this.state.error.message}</div>}

总的来说，你只要检查所有在JSX里用{}包裹的内容，确保它们是字符串、数字这种基本类型，或者是合法的React元素，这个报错就解决啦！

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