小编Ira*_*dze的帖子

将异步函数放入 useEffect 后出现错误

在 useEffect 函数中,如果我只提到 getResults 函数变量,应用程序不会崩溃。但是当我在下面的代码中调用它时,我收到这些错误:

react-dom.development.js:21857 Uncaught TypeError: destroy 不是函数

考虑向树添加错误边界以自​​定义错误处理行为。

  function App() {
  const [foods, setFoods] = useState([]);
  const [isLoaded, setIsLoaded] = useState(false);
  useEffect(() => getResponse());
  const getResponse = async () => {
    const response = await fetch(sampleRequest);
    const data = await response.json();
    setFoods(data.hits);
  };
  let query = "Tomato";
  let sampleRequest = `https://api.edamam.com/search?q=${query}&app_id=${"1811484f"}&app_key=${"9cac93361efc99e2ebfbb8a453882af8"}`;

  return (
    <div className="App">
      <div className="main">
        <div className="navbars">
          {" "}
          <Navbars></Navbars>
        </div>
        <div className="listings">
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
          <Listing></Listing>
        </div> …
Run Code Online (Sandbox Code Playgroud)

fetch reactjs use-effect

34
推荐指数
3
解决办法
3万
查看次数

如何在另一个函数中使用 useEffect() 中声明的变量?

ps 解决了我遇到的问题,但如果您有时间,我仍然想听听您对此和我的代码的看法:)

我只能在渲染完成后为该变量赋值,所以我假设我必须在 useEffect() 中声明该变量,并且不可能在全局范围内为其赋值(在任何渲染之前执行)。但我也想在另一个 useEffect() 中使用该变量,但我不能,因为它是在函数内部声明的,并且它不属于全局范围。另外,有两个 useEffect -s 正常吗?我需要获取画布的上下文,并保持该上下文一致(不会在每次 DOM 更新时获取新的上下文,因为当我没有将 [] 作为第一个 useEffect 的第二个参数时会发生这种情况)。另一个是随着状态的变化在那个独特的上下文中做事。是否有意义?我的代码:

import React, { useState, useRef, useEffect } from "react";
import { degreesToRadiansFlipped } from "./helpers/degreesToRadiansFlipped";
function Circle() {
  let [degree, setDegree] = useState(0);
  const canvas = useRef();
  const inputField = useRef();
  const coordinateX = Math.cos(degreesToRadiansFlipped(degree)) * 100 + 250;
  const coordinateY = Math.sin(degreesToRadiansFlipped(degree)) * 100 + 250;

  useEffect(() => {
    const context = canvas.current.getContext("2d");
    drawCircle(context, coordinateX, coordinateY);
    return context;
    /*return function cleanUp() {
      context.clearRect(0, …
Run Code Online (Sandbox Code Playgroud)

canvas reactjs react-canvas react-hooks use-effect

6
推荐指数
2
解决办法
1万
查看次数

标签 统计

reactjs ×2

use-effect ×2

canvas ×1

fetch ×1

react-canvas ×1

react-hooks ×1