React中使用axios获取Elasticsearch(localhost:9200)数据渲染卡片失败求助

问题排查及修复方案 #

问题核心是Elasticsearch的/_search接口返回的响应结构和你的预期不一致，赋值逻辑错误导致没有拿到正确的业务数据，修复步骤如下：

• 第一步：修正ES响应数据的提取逻辑
  ES搜索接口返回的resp.data是顶层响应对象，你需要的业务文档数据存放在resp.data.hits.hits数组中，且每个文档的实际字段都封装在_source属性里，修改componentDidMount里的赋值代码：

componentDidMount(){
  axios.get('http://localhost:9200/ncar_index/ncar/_search')
    .then(resp => {
      // 提取所有文档的_source字段组成业务数据数组
      const docList = resp.data.hits.hits.map(hit => hit._source)
      this.setState({
        NCARMap: docList, 
        NCARMapAS: docList
      }, () => {
        // setState是异步操作，要在回调里打印才能拿到更新后的状态值
        console.log(this.state.NCARMap)
      })
  })
}

• 第二步：确认列表渲染逻辑正确
  你需要在render方法中对NCARMap数组执行map遍历调用CreateCards方法，示例逻辑如下：

render() {
  return (
    <div className="card-container">
      {this.state.NCARMap.map(item => CreateCards(item))}
    </div>
  )
}

• 第三步：校验字段匹配
  检查ES存储的文档字段名和你SimpleCard组件接收的props是否完全一致，比如是否真的存在approvetool、num、summary这些字段，拼写错误也会导致卡片渲染空值。
• 额外调试提示：可以在浏览器控制台打开Network面板，查看ES接口的实际返回内容，确认数据结构和字段是否符合预期。

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