Reactjs 中的 map() 函数不适用于状态答案

【问题标题】：map() function in Reactjs is not working with stateReactjs 中的 map() 函数不适用于状态
【发布时间】：2019-10-07 10:37:56
【问题描述】：

我正在编写一个 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)，它可以在第一次渲染时记录一个[]空数组，在组件挂载后，它可以记录状态中的值。

【问题讨论】：

How do I return the response from an asynchronous call?

标签： javascript reactjs

【解决方案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

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

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

【讨论】：

【解决方案2】：

问题来了

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()
  },[]);

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

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()
  },[]);

【讨论】：