javascript - Reactjs 中的 map() 函数无法处理状态

Question

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

我的代码是这样的

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()都可以显示没有问题。但 map 功能无法使用。

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

Answer 1

问题出在这里:

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

setState(info) <-- HERE

您正在 Promise then 函数之外设置状态，因此在第一个周期中，状态将使用 setState([]) 填充，并且当异步响应来自DB 到达，然后对象信息被更新(你不应该更新状态中的对象，它应该始终是不可变的)，但是 React 不会收到状态更改的通知，因此不会有下一次重新渲染。

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