如何提供API數據以反應 - 本地管理單元

我正在使用React本地新聞應用程序，我必須解析來自REST API的數據並將該數據提供給snapous組件。如何提供API數據以反應 - 本地管理單元

snap-carousal有sliderEntry.js，它以鍵值對數組的形式期待title，subtitle，illustration。

SliderEntry.js

import React, { Component, PropTypes } from 'react'; 
import { View, Text, Image, TouchableOpacity } from 'react-native'; 
import styles from '../styles/SliderEntry.style'; 

export default class SliderEntry extends Component { 

static propTypes = { 
    title: PropTypes.string.isRequired, 
    subtitle: PropTypes.string, 
    illustration: PropTypes.string, 
    even: PropTypes.bool 
}; 

render() { 
    const { title, subtitle, illustration, even } = this.props; 

    const uppercaseTitle = title ? (
     <Text style={[styles.title, even ? styles.titleEven : {}]} numberOfLines={2}>{ title.toUpperCase() }</Text> 
    ) : false; 

    return (
     <TouchableOpacity 
      activeOpacity={0.7} 
      style={styles.slideInnerContainer} 
      onPress={() => { alert(`You've clicked '${title}'`); }} 
      > 
      <View style={[styles.imageContainer, even ? styles.imageContainerEven : {}]}> 
       <Image 
        source={{ uri: illustration }} 
        style={styles.image} 
       /> 
       <View style={[styles.radiusMask, even ? styles.radiusMaskEven : {}]} /> 
      </View> 
      <View style={[styles.textContainer, even ? styles.textContainerEven : {}]}> 
       { uppercaseTitle } 
       <Text style={[styles.subtitle, even ? styles.subtitleEven : {}]} numberOfLines={2}>{ subtitle }</Text> 
      </View> 
     </TouchableOpacity> 
    ); 
} 
}

我的API返回以不同的格式的數據，我必須設置狀態變量這是在格式sliderEntry.js期望的陣列，所以我已創建新的數組和提取標題，副標題，來自API響應的插圖，並將新數組設置爲狀態變量條目。

import React from "react"; 
import Carousel from 'react-native-snap-carousel'; 
import { sliderWidth, itemWidth } from './styles/SliderEntry.style'; 
import SliderEntry from './components/SliderEntry'; 
import styles from './styles/index.style'; 
import { ENTRIES1, ENTRIES2 } from './static/entries'; 

export default class HomeScreen extends React.Component { 

getSlides (entries) { 
    if (!entries) { 
     return false; 
    } 

    return entries.map((entry, index) => { 
     return (
      <SliderEntry 
       key={`carousel-entry-${index}`} 
       even={(index + 1) % 2 === 0} 
       {...entry} 
      /> 
     ); 
    }); 
} 

constructor(props) { 
super(props); 
this.state = {entries: ENTRIES1,entries2:[]}; 
} 

componentDidMount() { 
this.load(); 
} 

async load(){ 
    try { 
    let response = await fetch('http://newstrack.com/api/get_category_posts?id=263'); 
    let responseJson = await response.json(); 


var responseModified =[ 
{ 
    title: 'jhbfb ombop', 
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur', 
    illustration: 'http://i.imgur.com/UYiroysl.jpg' 
}, 
{ 
    title: 'Earlier this morning, NYC', 
    subtitle: 'Lorem ipsum dolor sit amet', 
    illustration: 'http://i.imgur.com/UPrs1EWl.jpg' 
}, 
{ 
    title: 'White Pocket Sunset', 
    subtitle: 'Lorem ipsum dolor sit amet et nuncat ', 
    illustration: 'http://i.imgur.com/MABUbpDl.jpg' 
}, 
{ 
    title: 'Acrocorinth, Greece', 
    subtitle: 'Lorem ipsum dolor sit amet et nuncat mergitur', 
    illustration: 'http://i.imgur.com/KZsmUi2l.jpg' 
}, 
{ 
    title: 'The lone tree, majestic landscape of New Zealand', 
    subtitle: 'Lorem ipsum dolor sit amet', 
    illustration: 'http://i.imgur.com/2nCt3Sbl.jpg' 
}, 
{ 
    title: 'Middle Earth, Germany', 
    subtitle: 'Lorem ipsum dolor sit amet', 
    illustration: 'http://i.imgur.com/lceHsT6l.jpg' 
} 
]; 

for (var i = 0; i <8; i++) { 
    responseModified [i].title=responseJson.posts[i].title; 
    responseModified [i].subtitle=responseJson.posts[i].excerpt; 
    responseModified[i].illustration= 
     responseJson.posts[i].attachments[0].url; 
} 


    this.setState({ 

     entries: responseJson.posts, 
     entries2: responseModified 

    }, function() { 
     // do something with new state 


    }); 
    } catch(error) 
    { 
    console.error(error); 
    } 
} 



render() { 
return (
<Carousel 
      sliderWidth={sliderWidth} 
      itemWidth={itemWidth} 
      inactiveSlideScale={1} 
      inactiveSlideOpacity={1} 
      enableMomentum={true} 
      autoplay={true} 
      autoplayDelay={500} 
      autoplayInterval={2500} 
      containerCustomStyle={styles.slider} 
      contentContainerCustomStyle={styles.sliderContainer} 
      showsHorizontalScrollIndicator={false} 
      snapOnAndroid={true} 
      removeClippedSubviews={false} 
      > 
       { this.getSlides(this.state.entries2) } 
      </Carousel> 
); 
} 
}

的API結構：

{ 
"posts":[ 
     { 
     "title": "We are not looking forward to forming new party", 
     "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam", 
     "attachments": [ 
      { 
       "url": "http:\/\/abc.com\/wp-content.jpg", 
      } 
      ] 
    }, 
    { 
     "title": "We are not looking forward to forming new party", 
     "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam", 
     "attachments": [ 
      { 
       "url": "http:\/\/abc.com\/wp-content.jpg", 
      } 
      ] 
    }, 
    { 
     "title": "We are not looking forward to forming new party", 
     "excerpt": "<p>Lucknow: Samajwadi Party patriarch Mulayam", 
     "attachments": [ 
      { 
       "url": "http:\/\/abc.com\/wp-content.jpg", 
      } 
      ] 
    }, 
    {...}, 
    ... 
] 
}

我想拿到冠軍，摘錄，URL和分配給title.subtitle，插圖。這是做到這一點的正確方法嗎？我得到錯誤：

undefined is not an object(evaluating 'responseModified[i].title=responseJson.posts[i].title')

來源

2017-09-25 Siddarth G

要修改數組，您可以先創建空數組。像

var arrayModified = [] 之後，你可以這樣

var array = responseJson.posts; 
for (let i = 0; i < array.length; i++) { 
    if (arrayModified[0] === []) { 
     arrayModified.pop(); 
    } else { 
     arrURI.push({ 
      title: array[i].title, 
      subtitle: array[i].imageName, 
      illustration: array[i].imageData, 
     }); 
    } 
}

在數組中插入值。根據我這是正確的方式，和可能後，你不會得到undifiend的錯誤這個。

來源

2017-12-25 11:42:30 Iva

如何提供API數據以反應 - 本地管理單元

回答

相關問題