javascript - React - useState 和 Firebase 的问题

Question

我试图解决这个问题，但我没有运气......

我正在使用 React 和“react-bootstrap”。使用 useState 从 firebase 获取数据，如下面的代码所示。而且我还将模态作为组件调用，并且该模态使用 useState 来显示和隐藏模态。

export const Models = () => {

    const [models, setModels] = useState(null);

    useEffect(() => {
        firebase.database().ref('Models').on('value', (snapshot) => {
            setModels(snapshot.val())
        });

    }, []);
    return models;
}

当我单击 url 访问模式时，问题结果会显示，主要组件会转到 firebase 并尝试再次获取数据。因此，如果我在模式上点击 3 次，我将从 Firebase 获取数据 3 次。

我该如何解决这个问题？无论您打开模式窗口多少次，都只从 Firebase 获取一次数据？

其他部分代码

const Gallery = () => {

    const [fireBaseDate, setFireBaseDate] = useState(null);
    axios.post('https://us-central1-models-gallery-puq.cloudfunctions.net/date',{format:'DD/MM/YYYY'})
    .then((response) => {
        setFireBaseDate(response.data)
    });

    let content = Models();
    let models = [];

    const [imageModalShow, setImageModalShow] = useState(false);
    const [selectedModel, setSelectedModel] = useState('');


    if(content){
        Object.keys(content).map((key, index) => 
        models[index] = content[key]
        );

        models = shuffleArray(models);
        console.log(models)

        return(
            <div className="appContentBody">
                <Jumbo />
                <Promotion models={models}/>
                <div className="Gallery">
                <h1>Galería - Under Patagonia</h1>

                <Filter />

                <div className="img-area">
                    {models.map((model, key) =>{
                        let myDate = new Date(model.creationDate);
                        let modelEndDate = new Date(myDate.setDate(myDate.getDate() + 30)).toLocaleDateString('en-GB')
                        if(fireBaseDate !== modelEndDate && model.active === true){
                            return (
                                <div className="img-card filterCard" key={key}>
                                    <div className="flip-img">
                                        <div className="flip-img-inner">
                                            <div className="flip-img-front">
                                                <img className="single-img card-img-top" src={model.thumbnail} alt="Model"/>
                                            </div>
                                            <div className="flip-img-back">
                                                <h2>{model.certified ? 'Verificada!' : 'No Verificada'}</h2>
                                                <p>Número: {model.contact_number}</p>
                                                <p>Ciudad: {model.city}</p>
                                                <p>Servicios: {model.services}</p>
                                            </div>
                                        </div>
                                    </div>
                                    <h5>{model.name}</h5>

                                    <Button variant="danger" onClick={() => {
                                                setImageModalShow(true)
                                                setSelectedModel(model)}
                                                }>
                                        Ver
                                    </Button>
                                </div>  
                            );
                        }
                    return 0})}                
                </div>
                    <Image
                        show={imageModalShow}
                        onHide={() => setImageModalShow(false)}
                        model={selectedModel}
                    />
                </div>
            <Footer />
            </div>
    )} else {
        return (
            <div className="loading">
                <h1>Loading...</h1>
            </div>
    )}
}


export default Gallery;

感谢您的宝贵时间!

Answer 1

Models 是一个常规的 javascript 函数，而不是一个函数组件。所以这不是钩子(Hook)的有效使用，并且不会按预期工作。请参阅 rules of hooks 上的文档.

功能组件接收 props 并返回 JSX 或另一个 React 元素。

因为它没有，所以它基本上是在每次被父级调用时重新启动并调用您的效果。

查看您的编辑，您可能应该删除 Models 函数并将逻辑放入 Gallery 组件中。