Question

我正在使用此代码：

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

所以我假设我需要修改弹性搜索数据，或者我需要修改我的网络搜索查询？

感谢您的帮助

Answer 1

.pipe(map(res => res.data),
    map(a => {
        return {
            firstnames: a.map(_ => _.firstname),
            lastnames: a.map(_ => _.lastname)
        }
    }));

结果在＆＃39; res＆＃39;看到更详细的日志后。现在工作正常

如何修改从elasticsearch获取的数据结构以在反应原生平面列表中呈现项目？

1 个答案: