React Native ListView datasource

Pablito · Регистрация: 12.05.2014

Студворк — интернет-сервис помощи студентам

Всем привет.

Я сам из раздела android, изучаю для себя JS и так далее.
После Java как-то медленно заходит стиль написания кода JavaScript

Меня бы кто-то в двух предложениях, а еще лучше просто в коде ткнул как сделать, а я дальше сам.
Я настроил локально сервер на node.js, который по запросу отдает такой json

Кликните здесь для просмотра всего текста

JSON
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
[
 {
  "id": 1,
  "name": "Branch 1",
  "address": "Address 111111111111",
  "phoneNum": "",
  "lat": 1000,
  "lng": 20000
 },
 {
  "id": 2,
  "name": "Branch 2",
  "address": "Address 2",
  "phoneNum": "",
  "lat": 1100,
  "lng": 20455
 },
 {
  "id": 3,
  "name": "Branch 3",
  "address": "Address 3",
  "phoneNum": "",
  "lat": 1200,
  "lng": 1457
 }
]

Получаю этот json так

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
'use strict';
import React, {Component} from "react";
import {AppRegistry, StyleSheet, ListView, Text, Button, View} from "react-native";
 
class HelloWorld extends Component {
 
    constructor(props) {
        super(props);
        const ds = new ListView.DataSource({rowHasChanged: (r1, r2) => r1 !== r2});
        this.state = {
            dataSource: ds,
        };
    }
 
    render() {
        return (
            <View >
                <ListView dataSource={this.state.dataSource}
                          renderRow={this.renderRow}
                          enableEmptySections={true}/>
 
                <Button title={'get branches'} onPress={this.onButtonPress}/>
            </View> );
    }
 
    onButtonPress = () => {
        let arr = getBranchesFromApi();
        console.log(arr[0]); // а тут уже не порядок, выводит undefined
        let ds = this.state.dataSource.cloneWithRows(arr);
        this.setState({dataSource: ds});
    };
 
    renderRow(data) {
        return (
            <View>
                <Text>{data}</Text>
            </View>
        )
    }
}
 
async function getBranchesFromApi() {
    try {
        let response = await fetch('http://10.0.10.161:8080/branches');
        let arr = await response.json();
        console.log(arr[0].name); // тут порядок, выводит 'Branch 1'
        return arr;
    } catch (error) {
        console.error(error);
    }
}
 
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

Я не могу понять, куда мне втулить результат, который возвращает эта асинхронная функция getBranchesFromApi()

Добавлено через 4 минуты
ps: тему следовало назвать скорее "react native async function result", но уже поздно

Добавлено через 9 минут
переписал код в java-style ), работает, но мне кажется что я сделал как-то топорно

Кликните здесь для просмотра всего текста

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
'use strict';
import React, {Component} from "react";
import {AppRegistry, StyleSheet, ListView, Text, Button, View} from "react-native";
 
class HelloWorld extends Component {
 
    // constuctor & render() are skipped
 
    onButtonPress = () => {
        getBranchesFromApi(this);
    };
 
    renderRow(data) {
        return (
            <View>
                <Text>{data.name}</Text>
            </View>
        )
    }
}
 
async function getBranchesFromApi(comp) {
    try {
        let response = await fetch('http://10.0.10.161:8080/branches');
        let arr = await response.json();
        let ds = comp.state.dataSource.cloneWithRows(arr);
        comp.setState({dataSource: ds});
    } catch (error) {
        console.error(error);
    }
}
 
AppRegistry.registerComponent('HelloWorld', () => HelloWorld);

@andrey7287 · 30.01.2017, 19:59

Функция должна быть определена внутри класса.

Новые блоги и статьи Все статьи Все блоги /
модель ЗдравоСохранения 8. Подготовка к разному выполнению заданий anaschu 08.04.2026 https:/ / github. com/ shumilovas/ med2. git main ветка * содержимое блока дэлэй из старой модели теперь внутри зайца новой модели 8ATzM_2aurI	Блокировка документа от изменений, если он открыт у другого пользователя Maks 08.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа, разработанного в конфигурации КА2. Задача: запретить редактирование документа, если он открыт у другого пользователя. / / . . .	Система безопасности+живучести для сервера-слоя интернета (сети). Двойная привязка. Hrethgir 08.04.2026 Далее были размышления о системе безопасности. Сообщения с наклонным текстом - мои. А как нам будет можно проверить, что ссылка наша, а не подделана хулиганами, которая выбросит на другую ветку и. . .	Модель ЗдрввоСохранения 7: больше работников, больше ресурсов. anaschu 08.04.2026 работников и заданий может быть сколько угодно, но настроено всё так, что используется пока что только 20% kYBz3eJf3jQ
Дальние перспективы сервера - слоя сети с космологическим дизайном интефейса карты и логики. Hrethgir 07.04.2026 Дальнейшее ближайшее планирование вывело к размышлениям над дальними перспективами. И вот тут может быть даже будут нужны оценки специалистов, так как в дальних перспективах всё может очень сильно. . .	Горе от ума kumehtar 07.04.2026 Эта мне ментальная установка, что вот прямо сейчас, мол, мне для полного счастья не хватает (нужное вписать), и когда я этого достигну - тогда и полный кайф. Одна из самых сильных ловушек на пути. . . .	Использование значений реквизитов справочника в документе, с определенными условиями и правами Maks 07.04.2026 1. Контроль срока действия договора Алгоритм из решения ниже реализован на примере нетипового документа "ЗаявкаНаРаботу", разработанного в конфигурации КА2. Задача: уведомлять пользователя, если. . .	Доступность команды формы по условию Maks 07.04.2026 Алгоритм из решения ниже реализован на примере нетипового документа "СписаниеМатериалов", разработанного в конфигурации КА2. Задача: сделать доступной кнопку (команда формы "ЗавершитьСписание") при. . .

@andrey7287 30 / 28 / 14 Регистрация: 06.01.2016 Сообщений: 161
	30.01.2017, 19:59
	Функция должна быть определена внутри класса. 0