Отображение массива объектов в React native с использованием метода map

Question

У меня есть следующий компонент, где я хочу отображать данные из API, ShopScreen. js. Я получаю данные с помощью ловушки useEffect из API в служебной папке, и все в порядке, данные json загружаются в переменную данных из ловушки useState, когда я его консоль.log. У меня проблема с отображением данных из этой переменной методом карты. Я получаю сообщение об ошибке: Не удается прочитать свойство 'map' из неопределенного. Может кто-то определить, где проблема? ShopScreen. js:

import React, { useState, useEffect } from 'react';
import { View, Text, StyleSheet, Button } from 'react-native';
import { fetchShops } from '../services/fetchShops';

const ShopsScreen = props => {
    const [data, setShops] = useState({});

    useEffect(() => {
        fetchShops()
            .then(response => response.json())
            .then(data => setShops(data));
    }, []);

    return(
        <View>
            <Text>The Shops Screen!</Text>
                {data.result.map(shop => {return (<Text>{shop.address}</Text>)})}
        </View>
    );
};

export default ShopsScreen;

Мой сервис для извлечения данных - fetchShops. js

export const fetchShops = () => {
    const URL = `https://vilvumbiyl.execute-api.eu-west-1.amazonaws.com/Dev/store/MEBD/list`;
    return fetch(URL)
}

Answer 1

useEffect без каких-либо параметров равно componentDidMount и по этой причине вызывается после рендера.

Итак, при первом вызове вашего jsx-кода data.result.map не определено и только после повторного рендеринга выполните ответ fetchShops(), у него есть значение.

Вам просто нужно проверить значение следующим образом:

data.result && data.result.map()

Answer 2

Вы можете попробовать:

const [data, setShops] = useState({result : {}});

или проверить data.result перед использованием карты на нем.

ShopsScreen возвращает ваше представление (JSX), прежде чем вы получите ответ от своего API отдыха , Результат null. Вы получаете исключение.