为什么 jsx 不渲染 Firestore 数据答案

【问题标题】：why wont jsx render firestore data为什么 jsx 不渲染 Firestore 数据
【发布时间】：2021-08-05 17:32:26
【问题描述】：

我正在尝试以最基本的方式从 firestore 获取数据并渲染它。我可以 console.log 数据，但是一旦我尝试通过 JSX 渲染它，它就不会。这是为什么呢？

import React from 'react'
import { useState, useEffect } from 'react'
import {db} from '../../public/init-firebase'

export default function Todo() {

    const [todo, setTodo] =  useState()  
    const myArray = []

    //retrive data from firestore and push to empty array
    function getData(){
        db.collection('Todos')
        .onSnapshot((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                console.log(doc.id +'pushed to myArray')
                myArray.push(doc.id)
            })
        })
       
    }


    useEffect(() => {
        getData()
    }, [])

      

    return (
        <>     
        <div>

            <h1>Data from firestore: </h1>

        {myArray.map((doc) => {
            <h1>{doc.id}</h1>
            console.log('hi')
        })}

        </div>
        
        </>
    )
}

【问题讨论】：

标签： javascript reactjs firebase jsx

【解决方案1】：

首先，将myArray 更改为这样的状态：

const [myArray, setMyArray] = useState([]);

myArray 中的每次更改都会重新渲染组件。然后，要在 State 中推送项目，请执行以下操作：

function getData(){
    db.collection('Todos')
    .onSnapshot((querySnapshot) => {
        querySnapshot.forEach((doc) => {
            console.log(doc.id +'pushed to myArray')
            setMyArray(oldArray => [...oldArray, doc.id])
        })
    })       
}

你只是在myArray中推送ID，所以什么时候显示试试这样：

{myArray.map((id) => {
    console.log('hi')
    return <h1 key={id}>{id}</h1>
})}

【讨论】：

【解决方案2】：

如果你仔细观察，

        {myArray.map((doc) => {
            <h1>{doc.id}</h1>
            console.log('hi')
        })}

那些是花括号{}，而不是括号()。这意味着尽管doc 存在，但什么都没有发生，因为您只是在声明<h1>{doc.id}</h1>。为了让它渲染，你必须在 map 函数中返回一些东西。试试这个：

        {myArray.map((doc) => {
            console.log('hi')
            return <h1>{doc.id}</h1>
        })}

【讨论】：

这仍然无法呈现我的数据
尝试将其与 yairmea 的答案结合起来

【解决方案3】：

为了强制“重新渲染”，你必须使用你定义的钩子

https://reactjs.org/docs/hooks-intro.html

    function getData(){
        db.collection('Todos')
        .onSnapshot((querySnapshot) => {
            querySnapshot.forEach((doc) => {
                console.log(doc.id +'pushed to myArray')
                myArray.push(doc.id)
            })
        })
// in case the request doesn't fail, and the array filled up with correct value using correct keys:
// i'd setState here, which will cause a re-render
       setTodo(myArray)
    }

【讨论】：