试图从表reactjs中的firebase获取数据答案

【问题标题】：Trying to fetch data from firebase in a table reactjs试图从表reactjs中的firebase获取数据
【发布时间】：2021-03-24 23:50:38
【问题描述】：

我正在尝试创建一个表来查找来自 firebase 的数据，但是该表总是出错。我将整个函数放在一个脚本中以验证组件调用中是否有任何错误，但总是列出相同的错误：TypeError: custos.map is not a function 有谁知道会是什么？我已经测试过了，变量 custos 可以返回对象，但是我不能在 map 函数中使用它

function MeusCustos(){
    

    const [custos, setCustos] = useState([]);
    const [pesquisa, setPesquisa] = useState('');
    const usuarioEmail = useSelector(state => state.usuarioEmail);
    let listaCustos = [];

    useEffect( () => {
                firebase.firestore().collection('custos').get().then(async(resultado) => {
                    resultado.docs.forEach(doc => {
                            listaCustos.push({
                                id: doc.id,
                                ...doc.data()
                            });
                        }); 
                    setCustos(JSON.stringify(listaCustos));
                }); 
    }, []);  
    
    return(
    <>
    <Navbar/>
    
    <div className="row p-3">
    <div className="container">
            <h1>Simple Inventory Table</h1>
            <table className="table table-striped">
                <thead>
                <tr>
                    <th scope="col">Titulo</th>
                    <th scope="col">Descrição</th>
                    <th scope="col">Quantidade</th>
                    <th scope="col">Valor</th>
                    <th scope="col">Data</th>
                    <th scope="col">Comprovante</th>
                    <th scope="col">UsuarioEmail</th>
                    <th scope="col">Visualizações</th>
                    <th scope="col">Publico</th>
                    <th scope="col">Criação</th>
                </tr>
                </thead>
                <tbody>
                {custos.map( item =>
                            <tr >
                                <th scope ="row"></th>
                                <td>{item.titulo}</td>
                                <td>{item.descricao}</td>
                                <td>{item.quantidade}</td>
                                <td>{item.valor}</td>
                                <td>{item.data}</td>
                                <td>{item.comprovante}</td>
                                <td>{item.usuarioemail}</td>
                                <td>{item.visualizacoes}</td>
                                <td>{item.publico}</td>
                                <td>{item.criacao}</td>
                            </tr> 
                     )}
                </tbody>
            </table>
        </div>

    </div>
    </>)
}


export default MeusCustos;

【问题讨论】：

不要把它串起来。 setCustos(listaCustos);
另外，将 listaCustos 变量放入 useEffect 挂钩
我试图把这个字符串放进去试图逃避一个错误。当我执行此配置时，错误返回：错误：对象作为 React 子项无效（找到：带有键 {seconds，nanoseconds} 的对象）。如果您打算渲染一组子项，请改用数组。

标签： reactjs firebase google-cloud-firestore map-function

【解决方案1】：

问题在于您的useEffect 挂钩。不要对数组进行字符串化，因为它会变成字符串，并且 map 函数适用于数组，更改 setCustos(JSON.stringify(listaCustos)); 使您的 useEffect 如下所示：

useEffect( () => {
            firebase.firestore().collection('custos').get().then(async(resultado) => {
                    resultado.docs.forEach(doc => {
                            listaCustos.push({
                                id: doc.id,
                                ...doc.data()
                            });
                        }); 
                    setCustos(listaCustos);
                }); 
    }, []);

【讨论】：

我试图把这个字符串放进去试图逃避一个错误。当我执行此配置时，错误返回：错误：对象作为 React 子项无效（找到：带有键 {seconds，nanoseconds} 的对象）。如果您打算渲染一组子项，请改用数组。
评论整个tbody，并写一个console.log（custos）我想看看你得到什么样的数据。当 yoi 尝试在 DOM 上渲染对象或数组时会出现此错误
我发现了问题，其中一个值是用sysdate写的，它带来了秒和纳秒的数据打破了日期分量

【解决方案2】：

我发现了问题，其中一个值是用sysdate写的，它带来了秒和纳秒的数据破坏了日期分量 Tks 4 帮助家伙

【讨论】：