Компонент React не перерисовывается, когда я использую useEffect и setState - PullRequest
Новая
       61

Компонент React не перерисовывается, когда я использую useEffect и setState

0 голосов
/ 31 января 2020

Я пишу приложение «Реакция» с библиотекой карт «Реакция-листовка». Однако, когда я использую useEffect для извлечения данных из хранилища, после успешного извлечения данных компонент карты вообще не рендерится.

Вот мой код: 

import React, { useState, useEffect } from 'react'
import { Map, TileLayer, Marker, Popup } from 'react-leaflet';
import "./App.css";
import firebase from "firebase";

export default function LeafletMapContainer(props) {

    const [storeData, setStoreData] = useState([]);
    const [centre, setCentre] = useState([22.3193, 114.1694])
    const config = {
        ...
    }

    const app = firebase.initializeApp(config);

    useEffect(() => {
        const fetchData = () => {
            let tmp = []
            const db = firebase.initializeApp(config).firestore();
            const query = db.collection("store").get().then(snapshot => {
                snapshot.forEach(doc => {
                    tmp.push(doc.data());
                })
            })
            setStoreData(tmp);
        }
        fetchData();
    }, [])

    return (
        <Map center={centre} zoom={12}>
            <TileLayer
                url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
                attribution='&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
            />
            {
                storeData.map(x => {
                    console.log([x.store_geo.latitude, x.store_geo.longitude])
                    if (!x.has_stock) {
                        return (
                            <Marker position={[x.store_geo.latitude, x.store_geo.longitude]}>
                                <Popup>
                                    A pretty CSS3 popup. <br /> Easily customizable.
                                </Popup>
                            </Marker>
                        )
                    } else {
                        return (
                            <Marker position={[x.store_geo.latitude, x.store_geo.longitude]}>
                                <Popup>
                                    A pretty CSS3 popup. <br /> Easily customizable.
                                </Popup>
                            </Marker>
                        )
                    }
                })
            }
        </Map>
    )
}

I также пытался передать storeData от родителя с помощью реквизита, но он также не работал.

...