如何修改从 elasticsearch 获取的数据结构以在 React Native flatlist 中呈现项目?

K索泽

我正在使用此代码:

import React, { Component } from 'react';
import {
  Platform,
  StyleSheet,
  Text,
  View,
  FlatList
} from 'react-native';
import {List, ListItem, SearchBar} from "react-native-elements";

export default class App extends Component<{}> {
  constructor(props){
    super(props);
    this.state = {
      data:[]
    };
  }

  componentDidMount(){
    this.test();
  }

  test() {
    console.log("FETCH");
    fetch('http://randomIP@:9200/definitions/definition/_search?pretty=1')
        .then((response) => response.json())
        .then((responseJson) =>  {
          this.setState({
            data : responseJson
          });
          var data = this.state.data;
          console.log("DATA", data);
      })
        .catch(function(e) {    // Failure callback registration
              alert('Failure fetching data');
              console.log(e)
    });
  }

  renderSeparator = () => {
    return (
      <View
        style={{
          height: 1,
          width: "86%",
          backgroundColor: "#CED0CE",
          marginLeft: "14%"
        }}
      />
    );
  };

  renderHeader = () => {
    return <SearchBar placeholder="Type Here..." lightTheme round />;
  };

  render() {
    return (
      <List containerStyle={{ borderTopWidth: 0, borderBottomWidth: 0 }}>
        <FlatList
          data={this.state.data}
          renderItem={({ item }) => (
            <ListItem
              roundAvatar
              title={`${item.mot} ${item.etymo}`}
              subtitle={item.dfn}
              containerStyle={{ borderBottomWidth: 0 }}
            />
          )}
          keyExtractor={item => item.id}
          ItemSeparatorComponent={this.renderSeparator}
          ListHeaderComponent={this.renderHeader}

        />
      </List>
    );
    <Text>
      {this.state.data.mot}
    </Text>
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: '#F5FCFF',
  },
  welcome: {
    fontSize: 20,
    textAlign: 'center',
    margin: 10,
  },
  instructions: {
    textAlign: 'center',
    color: '#333333',
    marginBottom: 5,
  },
});

我的问题是我无法在我的平面列表中显示任何项目。我记录的数据如下所示:

{
  "took" : 120,
  "timed_out" : false,
  "_shards" : {
    "total" : 5,
    "successful" : 5,
    "skipped" : 0,
    "failed" : 0
  },
  "hits" : {
    "total" : 4,
    "max_score" : 1.0,
    "hits" : [
      {
        "_index" : "definitions",
        "_type" : "definition",
        "_id" : "2",
        "_score" : 1.0,
        "_source" : {
          "mot" : "_j",
          "#text" : "abrév. et symboles",
          "dfn" : [
            "Joule.",
            "Jour."
          ]
        }
      },
      {
        "_index" : "definitions",
        "_type" : "definition",
        "_id" : "4",
        "_score" : 1.0,
        "_source" : {
          "mot" : "jabiru",
          "pho" : "[abiy]",
          "cat" : "n._m.",
          "etymo" : "1754mot guarani",
          "dfn" : "chassier des régions chaudes (ciconiiformes),à gros bec, voisin de la cigogne."
        }
      },
      {
        "_index" : "definitions",
        "_type" : "definition",
        "_id" : "1",
        "_score" : 1.0,
        "_source" : {
          "mot" : "_j",
          "pho" : "[i]",
          "cat" : "n._m._inv.",
          "dfn" : [
            "Dixième lettre et septième consonne de l'alphabet: j majuscule(J), j minuscule(j).",
            "Lettre qui note la fricative sonore palatale [](jardin, ajout, feuj)et parfois [d](jazz, jean)ou [j](fjord)dans des emprunts."
          ]
        }
      },
      {
        "_index" : "definitions",
        "_type" : "definition",
        "_id" : "3",
        "_score" : 1.0,
        "_source" : {
          "mot" : "_J",
          "pho" : "[i]",
          "cat" : "n._inv.",
          "etymo" : "1940abrév. de jeune",
          "xpl" : "J1, J2, J3: catégories de la population française de 3 à 21 ans correspondant à une carte de rationnement pendant la Deuxième Guerre mondiale.",
          "dfn" : "Membre de cette catégorie."
        }
      }
    ]
  }
}

但我可以从那里显示 JSON,例如:https : //jsonplaceholder.typicode.com/users

所以我假设我需要修改我的 elasticsearch 数据或者我需要修改我的网络搜索查询?

谢谢你的帮助

K索泽
<FlatList
          data={this.state.data.res}
...
/>

看到更详细的日志后,结果在“res”下。现在工作正常

本文收集自互联网,转载请注明来源。

如有侵权,请联系 [email protected] 删除。

编辑于
0

我来说两句

0 条评论
登录 后参与评论

相关文章

react-native在“触摸”后如何更改在FlatList中呈现的项目样式?

react native中Flatlist中firebase firestore的数据不会呈现

Flatlist 不呈现项目(React Native)

在React Native中没有使用Flatlist呈现数据

如何在React Native中的Flatlist中获取行索引

如何获取 json 并在 flatlist 中显示 img (React Native)

如何使用 FlatList 在 react-native 中渲染异构数据?

如何在 react-native 中刷新 Flatlist 数据?

如何在React Native中更新FlatList中的单个项目?

如何在React Native中从FlatList中删除项目/索引?

如何在 React Native 中保存 FlatList 中的项目?

React Native:FlatList 不呈现

React Native FlatList不呈现

对从以 Flatlist React Native 呈现的数据库中获取的对象数组进行排序

从React Native中的FlatList中删除项目

React Native FlatList 项目消失

React Native FlatList 删除项目

使用Redux时如何重新呈现FlatList React Native

在 React Native 的 FlatList 中延迟加载项目?

无法删除React Native FlatList中的项目

FlatList 项目到 React Native 中的图像

FlatList不呈现JSON数组React-native的数据

如何在 React Native 中为特定元素在 FlatList 中呈现函数

为什么Firebase中的数据无法在我的FlatList(React Native)中呈现?

React Native Flatlist 显示数据

即使在React Native中添加了数据后,flatlist也无法正确呈现数据?

在React Native中搜索FlatList

获取FlatList中所选项目的值。-React Native

如何为 React Native FlatList 创建自动项目分隔器?