извлечение данных из API и шоу по методу рендеринга

Вы можете использовать плагин зависимостей maven , который имеет хорошую цель dependency:get с версии 2.1. Нет необходимости в pom, все происходит в командной строке.

Чтобы убедиться, что вы найдете цель dependency:get, вам нужно явно указать maven для использования версии 2.1, то есть вам нужно использовать полностью квалифицированное имя плагина, включая версию:

mvn org.apache.maven.plugins:maven-dependency-plugin:2.1:get \
    -DrepoUrl=url \
    -Dartifact=groupId:artifactId:version

UPDATE: со старыми версиями Maven (до версии 2.1) можно запускать dependency:get в обычном режиме (без использования полного имени и версии), заставляя вашу копию maven использовать данную версию плагина.

Это можно сделать следующим образом:

1. Добавьте следующую строку в элемент вашего файла ~/.m2/settings.xml:

true

2. Добавьте файл ~/.m2/plugin-registry.xml со следующим содержимым:



  
    
      org.apache.maven.plugins
      maven-dependency-plugin
      2.1
      
    
  

Но это не похоже на работу с maven 2.1 / 2.2. На самом деле, согласно Введение в реестр плагинов , функции plugin-registry.xml были переработаны (для переносимости), а реестр плагинов в настоящее время находится в состоянии полубесплатного состояния в Maven 2 . Поэтому я думаю, что мы должны использовать длинное имя на данный момент (при использовании плагина без pom, что является идеей dependency:get).

0
задан Master Lala 18 January 2019 в 13:31
поделиться

3 ответа

Попробуйте, если у вас есть вопрос о том, как это работает, и я узнаю.

let self;
export default class ApiProduct extends Component {
  constructor(){
    super();
    self = this;
    this.state = {
      productData: null;
    };
  }
  FetchProduct=()=>{
    fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
      method:'GET',
    })
    .then((response) => response.json())
    .then((res) =>{
      self.setState({ productData: res});
    });
  }

  render() {
    this.FetchProduct();
    console.warn(self.state.productData);
    return (
      <View/>
    );
  }
0
ответ дан Mtg Kha Jeskai 18 January 2019 в 13:31
поделиться

Я постараюсь сделать заказ в вашем коде. Выборка данных в методе рендеринга не очень хорошая идея, лучше использовать методы жизненного цикла, например componentDidMount Чтобы обработать ваш результат запроса, установите поле состояния и в вашем рендере прочитайте данные из этого поля. Итак:

export default class ApiProduct extends Component {
  constructor(){
    super();
    this.state = {
      productData: undefined;
    };
  }     

  async componentDidMount(){
    await this.fetchProduct();
  }

  fetchProduct = () => {
    fetch('https://drawtopic.in/projects/wordpress/wp- json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b',{
      method:'GET',
    })
    .then((response) => response.json())
    .then((res) =>{
      this.setState({
        productData: res
      })
    })     
  }

render() {
  const {productData} = this.state;
  console.log(productData);
  return (
    <View/> // add here your code to render data properly
  )
}}
0
ответ дан Milore 18 January 2019 в 13:31
поделиться

Вот быстрый пример Экспо, который должен показать вам, как отобразить простой список. Не очень хорошая идея вызывать fetch внутри метода рендеринга, так как каждый повторный рендеринг будет вызывать fetch.

Вот пример закуски https://snack.expo.io/S1-LKIyQE

import React from 'react';
import { Text, View, StyleSheet, FlatList, SafeAreaView } from 'react-native';

export default class App extends React.Component {

  constructor(props) {
    super(props);
    this.state = {
      productData: []
    }
  }

  async componentDidMount () {
    await this.getData();
  }

  async getData() {
    try {
      let url ='https://drawtopic.in/projects/wordpress/wp-json/wc/v2/products?consumer_key=ck_044491712632ef889ec13c75daff5879a8291674&consumer_secret=cs_a8e16c732e1812017e15d278e1dce2765a88c49b'
      let response = await fetch(url, { method:'GET' });
      let responseJson = await response.json();
      this.setState({productData: responseJson});
    } catch (err) {
      console.warn(err);
    }
  }

  renderItem = ({item}) => {
      return (
      <View style={styles.mainItem}>
        <Text>{item.name}</Text>
      </View>
      );
    }

  keyExtractor = (item, index) => {
    return index.toString();
  }


  render() {
    return (
      <SafeAreaView style={styles.container}>
      <FlatList
        extraData={this.state}
        data={this.state.productData}
        keyExtractor={this.keyExtractor}
        renderItem={this.renderItem}
      />
      </SafeAreaView>
    )
  }
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center',
    backgroundColor: 'white'
  },
  mainItem: {
    width:200,
    height: 80, 
    justifyContent: 'center', 
    alignItems: 'center', 
    margin: 10, 
    backgroundColor: 'yellow',
    borderColor: 'black',
    borderWidth: 1
  },
});

Здесь я использовал async/await, так как он может сделать для намного более чистого и ясного кода. Это отличная статья о различиях между promises и async/await https://medium.com/@bluepnume/learn-about-promises-before-you-start-using-async-await-eb148164a9c8 [ 116].

Я также дал вам быстрый пример того, как использовать FlatList для отображения ваших данных. Вы должны проверить документы о том, как правильно его использовать https://facebook.github.io/react-native/docs/flatlist

Если вы хотите изменить способ отображения каждого элемента на экране необходимо обновить метод renderItem.

0
ответ дан Andrew 18 January 2019 в 13:31
поделиться
Другие вопросы по тегам:

Похожие вопросы: