Как получить данные из alphaVantage с помощью параметра, заданного при навигации к компоненту в приложении, поддерживающем реакцию? - PullRequest
Новая
       121

Как получить данные из alphaVantage с помощью параметра, заданного при навигации к компоненту в приложении, поддерживающем реакцию?

0 голосов
/ 12 июля 2020

Это компонент, задающий параметр (Nifty50) в моем приложении, в котором Stock's Symbol предоставляется с использованием navigation с использованием события onPress: 

import React, { Component } from 'react';
import { FlatList} from 'react-native-gesture-handler';
import { ListItem } from 'react-native-elements';
import { connect } from 'react-redux';

const mapStateToProps = state => {
    return {
        nifty50 : state.nifty50
    }
}

class Nifty50 extends Component
{
    render()
    {
        const renderStocks = ({item, index}) => {
            return(
                <ListItem 
                    onPress = {() => navigate('Details', {Symbol : item.Symbol})}
                    key = {index}
                    title = {item.Symbol}
                    subtitle = {item.CompanyName}
                    hideChevron = {true}
                />
            );
        }

        const { navigate } = this.props.navigation;
    
        if(this.props.nifty50.errMess) {
            return(
                <View>            
                    <Text>{props.nifty50.errMess}</Text>
                </View>            
            );
        }
        else {
            return(
                <FlatList 
                    data = {this.props.nifty50.nifty50}
                    renderItem = {renderStocks}
                    keyExtractor = {item => item.ISINCode}
                />              
            );
        }
    }
}


export default connect(mapStateToProps)(Nifty50);

Принимающая сторона или StockDetails Компонент выглядит так: 

import React, { Component } from 'react';
import { ListItem } from 'react-native-elements';
import { FlatList } from 'react-native-gesture-handler';

class Details extends Component
{
    constructor(props)
    {
        super(props);
        this.state = {
            symbol: this.props.route.params,
            details: []
        }
    }

    componentDidMount() {
        this.fetchStock();
    }

    fetchStock(){
        const pointerToThis = this;
        console.log(pointerToThis);
        const API_KEY = 'J5FBDBYILAAA1I98';
        let API_Call = `https://www.alphavantage.co/query?function=TIME_SERIES_INTRADAY&symbol=${this.state.symbol}&interval=1min&apikey=${API_KEY}`
        let detailsFunction = []

        fetch(API_Call)
        .then(response => response.json())
        .then(data => {
            this.setState({details: data})
        })
    }

    render(){
        const renderDetails = ({item}) => {
            return(
                <ListItem 
                    onPress = {() => navigate('Details', {Symbol : item.Symbol})}
                    title = {item}
                    hideChevron = {false}
                />
            );
        }

        return(
            <FlatList 
                data = {this.state.details}
                renderItem = {renderDetails}
            />
        );
    }
}

export default Details;

На мгновение можно увидеть header и больше никаких данных, а затем весь экран станет пустым. Консоль содержит: 

invariant.js:40 Uncaught Invariant Violation: Tried to get frame for out of range index NaN``` ...

Can I use a different method to fetch data?

And can I use `Symbol` to connect my own json-server's data which is used in `Nifty50` and API's data, as I did?
...