React-native: как получить JSON из бэкэнда и поместить объекты в реагирующие элементы, такие как Text? - PullRequest
Новая
       11

React-native: как получить JSON из бэкэнда и поместить объекты в реагирующие элементы, такие как Text?

0 голосов
/ 26 декабря 2018

Я пытаюсь получить данные JSON из php-файла, который, кажется, работает нормально;Я могу предупредить значения из JSON.Но я хочу иметь возможность поместить эти значения на экране мобильного приложения в текстовые элементы или что-то еще.И я хочу, чтобы это происходило при открытии экрана, а не при нажатии кнопки.Поэтому я сделал функцию, которая выбирает JSON, и я пытаюсь вернуть значение в элементах Text.Эта функция вызывается из рендеринга.Я не получаю сообщения об ошибках, но это не работает.Ничего не появляется.

Вот код: 

import React, { Component } from 'react';
import { View, Text, AsyncStorage, Alert } from 'react-native';
import { UsersMap } from '../UsersMap';
import { PrimaryButton } from '../Buttons';
import styles from './styles';

class RestOptions extends Component {

    getSearchResults() {
        fetch('http://192.168.1.3/Restaurant_App/php/search_results.php')
        .then((response) => response.json())
        .then((responseJson) => {
            var JSON_Test = responseJson["distance"][0];
            //Alert.alert(JSON_Test);
            return (
                <View>
                    <Text>{JSON_Test}</Text>
                </View>
            );
        }).catch((error) => {
            console.error(error);
        });
    }

    setReservation = () => {
        this.props.navigation.navigate('SetReservation');
    };

    render() {
        return (
            <View>
                <UsersMap />
                {this.getSearchResults()}
                <PrimaryButton
                    label="Set Reservation"
                    onPress={() => this.setReservation()}
                />
            </View>
        );
    }
};

export default RestOptions;

Вот что происходит.Значение JSON должно отображаться между картой и кнопкой:

Экран результатов поиска

1 Ответ

0 голосов
/ 27 декабря 2018

Прежде всего, чтобы получить данные при открытии экрана, вы должны использовать метод жизненного цикла componentWillMount, который выполняется до первого рендеринга, а затем сохранить результат в состоянии компонента. Реагирует на документы по состоянию и жизненному циклу 

class RestOptions extends Component {
    constructor(props) {
        super(props);
        this.state = {
            jsonTest: null
        }
    }

    componentWillMount() {
        this.getSearchResults();
    }

    getSearchResults() {
        fetch('http://192.168.1.3/Restaurant_App/php/search_results.php')
        .then((response) => response.json())
        .then((responseJson) => {
            var JSON_Test = responseJson["distance"][0];
            //Alert.alert(JSON_Test);
            this.setState({ jsonTest: JSON_Test });
        }).catch((error) => {
            console.error(error);
        });
    }
//...

Затем вы можете отобразить значение метода render(): 

render() {
    return (
        <View>
            <UsersMap />

            <Text>{this.state.jsonTest}</Text>

            <PrimaryButton
                label="Set Reservation"
                onPress={() => this.setReservation()}
            />
        </View>
    );
}

Если ответ является массивомзначений, вы можете использовать map() для отображения каждого из них в своем собственном элементе Text: 

{this.state.jsonTest.map((value, index) => <Text key={index}>{value}</Text>)}
...