在React的useEffect中如何将返回的HTML插入到指定容器？

你不需要通过useEffect手动触发DOM插入逻辑，React本身会在state（也就是你定义的searchResults）更新时自动重新执行组件渲染逻辑，直接按声明式写法把要渲染的内容放到对应容器位置即可。

具体修改步骤 #

• 第一步：删除你现有代码里的useEffect逻辑，这段逻辑没有实际作用，你不需要主动调用displaySearchResult触发渲染
• 第二步：在你要插入内容的<div className="search-results-container">节点内调用displaySearchResult()，同时加一层非空判断避免初始无数据时访问属性报错

修改后的渲染部分代码参考：

return (
    <div className="App">
      <div className="App-container">
        <div className="search-field-container">
          <TextField value={searchPhrase} onInput={e => setSearchPhrase(e.target.value)} />
          <Button
          onClick={() => searchArtist(searchPhrase).then(response => setSearchResults(response))}>Search artist</Button>
        </div>
        <div className="search-results-container">
          {/* 直接在这里调用你写的生成JSX的函数即可 */}
          {searchResults?.artists?.items && displaySearchResult()}
        </div>
      </div>
    </div>
);

如果需要加空状态提示，也可以调整判断逻辑：

<div className="search-results-container">
  {searchResults?.artists?.items ? 
    displaySearchResult() : 
    <p>暂无搜索结果</p>
  }
</div>

如果你的项目不支持可选链?.语法，可以替换为普通的层级判断：searchResults && searchResults.artists && searchResults.artists.items && displaySearchResult()

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