开发者问题收集

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

2020-09-28
1131
javascript reactjs react-hooks faunadb netlify-function

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

这是我在组件中的代码： 

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 hooks，所以我还在学习。请帮忙！

2个回答

我认为问题在于您的 getAll 方法不是异步的，因此 await 不会执行任何操作。我会将该函数设为异步，看看是否能解决您的问题。

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

useEffect(() => {      
    getAll()
        .then(result => setState(result))
        .catch(e => console.log(e);
    }
}, []);
Jeremy Dahms
2020-09-28

我发现我需要做的就是让 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);
    }
}
ztcollazo
2020-11-03