Массив undefine после setState и результата API - PullRequest
Новая
       37

Массив undefine после setState и результата API

1 голос
/ 30 марта 2020

Я начинаю с response-native.

Я пытаюсь создать ImageGallery. Одним из шагов для создания этой галереи является инициирование массива в состоянии с результатом API.

  1. Я инициирую массив void в состоянии с именем "images"
  2. Я вызываю API -> console.log, я правильно вижу результат
  3. Я хочу установить мой массив "images"
  4. Я хочу прочитать мой массив "images"

Вот мой код 

import React from 'react';
import {
    View,
    Image,
    FlatList
} from 'react-native';

export default class TestGallery extends React.Component {

constructor(props) {
    super(props);
    this.state = {
        error: null,
        images: []
    };
}

componentDidMount() {
    fetch("*************************************")
        .then(res => res.json())
        .then(res => console.log(res))
        .then((result) => {
                this.setState({
                    images: result.images
                });
            },
            (error) => {
                this.setState({
                    error
                });
            }
        )
}

render() {
    console.log('Step 3 : RENDER')

    console.log(this.state.images)

    return (
        <View style={{ height: 200, width: 200 }}>
            <FlatList
                data={this.state.images}
                renderItem={({ item }) => (
                    <Image
                        style={{ height: 200, width: 200, backgroundColor: 'red' }}
                        source={this.state.images}
                    />
                )}
            />
        </View>

    )
}
}

Консоль: 

Step 3 : RENDER
Array []
Array [
  "photo(3).jpg",
  "photo(7).jpg",
  "photo(2).jpg",
  "photo(8).jpg",
  "photo(14).jpg",
  "photo(12).jpg",
  "photo(6).jpg",
  "photo(15).jpg",
  "photo(10).jpg",
  "photo(9).jpg",
  "photo(5).jpg",
  "photo(1).jpg",
  "photo(11).jpg",
  "photo(13).jpg",
  "photo(4).jpg",
]

[Unhandled promise rejection: TypeError: undefined is not an object (evaluating 'result.images')]

Кто-нибудь может мне помочь? Почему я не могу установить свой массив "Изображения"

1 Ответ

0 голосов
/ 30 марта 2020
  1. Как вы видите в своем console.log, ваш ответ уже представляет собой массив изображений (имена, а не URL-адреса, как кажется). Вы ожидаете объект с ключом images. Ну, вам придется настроить конечную точку API для этого. Чтобы перевести массив результатов в ваше состояние, вы можете сделать следующее. 
fetch(...)
.then(res => res.json())
.then(json => {
  console.log(json)
  this.setState({images: json})
})

Ваши изображения не будут отображаться с этим кодом, так как вы получаете имена изображений. Когда эти изображения сохраняются в вашем проекте RN, вы должны будете использовать require для источника изображения с правильным путем к изображениям. Но я почти уверен, что вы хотите визуализировать с uri, поэтому вам придется использовать uri для источника изображения с правильным URL-адресом изображения.

Вам необходимо используйте item из вашей функции renderItem для источника изображения, так как это будет один элемент this.state.images. Вы передаете весь массив, сохраненный в this.state.images, в источник изображения.

Вы действительно должны прочитать документацию более внимательно. Изображение: https://reactnative.dev/docs/image Плоский список: https://reactnative.dev/docs/flatlist.html

...