Reactjs 中的 map() 函数不能与状态一起使用

Question

我正在编写一个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>
)
}

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

我尝试只编写控制台.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

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

如何解决？将setState(info)调用放在承诺解析(then(函数中。

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

您没有正确理解承诺，请立即阅读它们

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