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

如何解决为什么我的功能性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钩子，所以我还在学习。请帮忙！

解决方法

我认为问题在于您的getAll方法不是异步的，因此await没有任何作用。我将使该功能异步，看看是否可以解决您的问题。

此外，useEffect的第二个参数是useEffect监视的值数组，以查看是否应再次运行，每次该数组中的一个值更改useEffect钩子再次运行。由于您正在执行API调用，因此我假设它应该在第一个渲染上运行一次，然后在随后的渲染上不再运行。在这种情况下，我会将数组留空，使其仅运行一次。这就是componentDidMount生命周期方法与功能组件中的钩子一起复制的方式。我会稍微减少这个钩子，使其看起来像这样：

useEffect(() => {      
    getAll()
        .then(result => setState(result))
        .catch(e => console.log(e);
    }
},[]);

,

我发现我需要做的就是使getAll函数异步，以便await实际上可以做某事，并且我知道它可以工作，因为fetch是一个承诺。最终看起来像这样：

export const getAll = async () => {
    try {
      const response = await fetch(
        "/.netlify/functions/read-all"
      )
      
      const json = response.json();

      console.log(json);
      return json;
    } catch (error) {
      console.error(error);
    }
}