1

我正在编写一个 Reactjs 网站并从 firebase 数据库中获取数据。我将获取的数据存储到反应状态。但是，当我尝试对状态使用地图功能时。它不起作用，并且没有显示错误消息。

我的代码是这样的

import React from 'react';
import { data } from './data.js'
import { useState, useEffect } from 'react';

export default function Navi(props) {

    const [state,setState] = useState([])

    useEffect(() => {
        const fetchData = () =>{
            var info = []
            props.db.collection("data").get().then((querySnapshot) => {
                querySnapshot.forEach((doc) => {
                    info.push({id:doc.id, name:doc.data().name})
                });
            });
            setState(info)
        }
        fetchData()
      },[]);



    return (
        <div>
            <Navbar bg="light" expand="lg">
                <Navbar.Brand href="/home">Logo</Navbar.Brand>
                <Navbar.Toggle aria-controls="basic-navbar-nav" />
                <Navbar.Collapse id="basic-navbar-nav">
                    <Nav className="mr-auto">
                        <Nav.Link href="/report">re</Nav.Link>
                        <Nav.Link href="/call">call</Nav.Link>
                        <Nav.Link href="/suck">suck</Nav.Link>
                        <NavDropdown title="r" id="basic-nav-dropdown">
                            {   
                                console.log(1)||
                                state.map(x=>{
                                    console.log(x)
                                })&&
                                console.log(2)
                            }   

                        </NavDropdown>
                    </Nav>
                </Navbar.Collapse>
            </Navbar>
        </div>
    )
}

console.log(1) 和 console.log(2) 用于调试目的。两个 console.log() 都可以显示没有问题。但是地图功能不起作用。

我尝试只编写console.log(state)，它可以在第一次渲染中记录一个[]空数组，在组件安装后，它可以记录状态中的值。

4

2 回答 2

0

问题就在这里

useEffect(() => {
    const fetchData = () =>{
        var info = [] // <-- EMPTY
        props.db.collection("data").get().then((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                info.push({id:doc.id, name:doc.data().name})
            });
        });
        setState(info)  // <-- still EMPTY
    }
    fetchData()
  },[]);

你没有正确理解 Promises，现在阅读它们

useEffect(() => {
    const fetchData = () =>{
        props.db.collection("data").get()
            .then((querySnapshot) => {
                const info = querySnapshot.map((doc) => ({id:doc.id, name:doc.data().name}))
                setState(info)
            })
    }
    fetchData()
  },[]);
于 2019-10-07T10:48:12.417 回答
0

问题在这里：

var info = []
props.db.collection("data").get().then((querySnapshot) => {
  querySnapshot.forEach((doc) => {
    info.push({id:doc.id, name:doc.data().name})
  });
});

setState(info) <-- HERE

您在 promisethen函数之外设置状态，因此在第一个周期中填充状态setState([])，当来自 DB 的异步响应到达时，对象信息会更新（您永远不应该更新状态中的对象，它应该始终是不可变的) 但是 React 没有收到有关状态更改的通知，因此没有下一次重新渲染。

如何解决？将setState(info)调用放在 promise resolve ( then) 函数中。

于 2019-10-07T10:45:26.213 回答