Warning: file_get_contents(/data/phpspider/zhask/data//catemap/9/javascript/397.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181

Warning: file_get_contents(/data/phpspider/zhask/data//catemap/3/reactjs/23.json): failed to open stream: No such file or directory in /data/phpspider/zhask/libs/function.php on line 167

Warning: Invalid argument supplied for foreach() in /data/phpspider/zhask/libs/tag.function.php on line 1116

Notice: Undefined index: in /data/phpspider/zhask/libs/function.php on line 180

Warning: array_chunk() expects parameter 1 to be array, null given in /data/phpspider/zhask/libs/function.php on line 181
Javascript 反应组件isn';使用useEffect和setState时不会重新渲染_Javascript_Reactjs_Leaflet_React Leaflet_Use Effect - Fatal编程技术网

Javascript 反应组件isn';使用useEffect和setState时不会重新渲染

Javascript 反应组件isn';使用useEffect和setState时不会重新渲染,javascript,reactjs,leaflet,react-leaflet,use-effect,Javascript,Reactjs,Leaflet,React Leaflet,Use Effect,我正在用react传单地图库编写react应用程序。但是,当我使用useEffect从firestore获取数据时,在成功获取数据后,贴图组件根本不会重新渲染 这是我的密码: import React, { useState, useEffect } from 'react' import { Map, TileLayer, Marker, Popup } from 'react-leaflet'; import "./App.css"; import firebase from "fireba

我正在用react传单地图库编写react应用程序。但是,当我使用useEffect从firestore获取数据时,在成功获取数据后,贴图组件根本不会重新渲染

这是我的密码:

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>
    )
}
import React,{useState,useffect}来自“React”
从“反应传单”导入{Map,tillelayer,Marker,Popup};
导入“/App.css”;
从“firebase”导入firebase;
导出默认函数传单MapContainer(道具){
const[storeData,setStoreData]=useState([]);
const[center,setcenter]=useState([22.3193114.1694])
常量配置={
...
}
const app=firebase.initializeApp(配置);
useffect(()=>{
常量fetchData=()=>{
设tmp=[]
const db=firebase.initializeApp(config.firestore();
const query=db.collection(“store”).get()。然后(快照=>{
snapshot.forEach(doc=>{
tmp.push(doc.data());
})
})
设置存储数据(tmp);
}
fetchData();
}, [])
返回(
{
storeData.map(x=>{
console.log([x.store\u geo.latitude,x.store\u geo.longitude])
如果(!x.有库存){
返回(
一个漂亮的CSS3弹出窗口。
可轻松定制。 ) }否则{ 返回( 一个漂亮的CSS3弹出窗口。
可轻松定制。 ) } }) } ) }

我还尝试使用道具从父级传递storeData,但也不起作用。

我想说,您的请求在设置状态后返回数据。您需要在您的承诺中更新您的状态,因为它是异步的。@demkovych I工作!!!!!!非常感谢。