为什么我的功能性React组件的状态抛出TypeError：状态未定义？

问题描述

我正在React的第一个网站上工作，该网站基于FaunaDB数据库。我正在使用Netlify和Netlify函数来访问我的服务器端代码。当尝试使用react useEffect，useState和useRef从数据库中获取所有数据时，我得到TypeError：状态未定义。结果将状态设置为对象数组，因此状态的初始值是一个空数组。我尝试转换为类组件，但得到了相同的响应。我想知道是否不应该使用array.map，但是我已经尝试了for循环，它不会引发错误，但是也不会呈现任何内容。

这是我在Component中的代码：

import React,{ useState,useEffect,useRef } from "react";
import { getAll } from "../../fauna";

const AllResults = () => {
    const [state,setState] = useState([]);
    const isRendered = useRef(false);

    useEffect(() => {
        const getResults = async () => {
            try {
                if (!isRendered.current) {
                    const result = await getAll();
                    setState(result);
                    isRendered.current = true;
                }
            } catch (e) {
                console.log(e);
            }
        }

        getResults();
    },[isRendered,setState]);

    console.log(state);

    const allResults = state.map((l) => {
        return <p key={ l.key } { ...l }></p>
    });
    
    return allResults;
}

export default AllResults;

这是我的getAll函数：

export const getAll = () => {
    return fetch(
        "/.netlify/functions/read-all"
    )
    .then(
        (response) => {
            return response.json();
        }
    )
    .catch(
        (error) => {
            console.error(error);
        }
    );
}

及其要获取的功能：

const faunadb = require("faunadb");
const dotenv = require("dotenv");
const path = require("path");

dotenv.config({ path: path.resolve("../../../.env") });
const q = faunadb.query;
const db = new faunadb.Client({ secret: process.env.FAUNA_SERVER_KEY });

exports.handler = async (_event,_context,callback) => {
    console.log("Reading database...");
    try {
        const res = await db.query(
            q.Paginate(
                q.Match(
                    q.Index("all")
                )
            )
        );
        const all = res.data;
        console.log("Success! ${all.length} items found");

        const getAll = all.map(
            (ref) => {
                return q.Get(ref);
            }
        );
        const ret = await db.query(getAll);
        return callback(
            null,{
                statusCode: 200,body: JSON.stringify(ret.map((refs) => refs.data))
            }
        );
    }
    catch (err) {
        console.log("Error: ",err);
        return callback(
            null,{
                statusCode: 400,body: JSON.stringify(err)
            }
        );
    }
}

这是我第一次使用React钩子，所以我还在学习。请帮忙！

解决方法

暂无找到可以解决该程序问题的有效方法，小编努力寻找整理中！

如果你已经找到好的解决方法，欢迎将解决方案带上本链接一起发送给小编。

小编邮箱:dio#foxmail.com (将#修改为@）