标签: use-effect

我有以下代码片段，我收到两个警告：

警告：无法对已卸载的组件执行 React 状态更新。这是一个空操作，但它表明应用程序中存在内存泄漏。要修复此问题，请取消 useEffect 清理函数中的所有订阅和异步任务。

unmountComponentAtNode()：您尝试卸载的节点是由 React 的另一个副本渲染的。

    import React, { useState, useEffect } from "react";
    import GravatarList from "./GravatarList";
    import Header from "./Header";
    import { calculateNumberOfImages } from "./utils";
    
    const App = () => {
      const handle = () => {
        setState({ images: calculateNumberOfImages() });
      }
    
    
      useEffect(() => {
          return () => {
    
            window.removeEventListener('resize', () => handle())
            window.removeEventListener('scroll', () => handle())
          }
       }, [])
    
    
      const [state, setState] = useState(() => {
        
        window.addEventListener("scroll", () => handle());
        window.addEventListener("resize", () => …

我确实找到了针对快速服务器的解决方案，但我无法在我的反应应用程序中实现相同的方法。

提到这个。请建议。（我是CORS初学者）

这是我的 App.js 文件：

import { useEffect, useState } from "react";
import "./App.css";

function App() {

  const APP_ID = "--"
  const APP_KEY = "--"

  const [counter, setCounter] = useState(0);

  useEffect(() => {
    getRecipes();
  }, [])

  const getRecipes = async () => {
    const response = await fetch(`https://api.edamam.com/search?q=chicken&app_id=${APP_ID}&app_key=${APP_KEY}&from=0&to=3&calories=591-722&health=alcohol-free`);
    const data = response.json();
    console.log(data);
  }

  return <div className="App">
    <form className="search-form">
      <input className="search-bar" type="text" placeholder="Search query here!" />
      <button
        className="search-button" type="submit">
        Search
      </button>
    </form>
    <h1 onClick={() => setCounter(counter + 1)}>{counter}</h1> …

我试图理解在组件函数中具有副作用与在没有传入依赖项数组的效果中使用副作用之间的实际区别（因此应该在每次渲染时触发）。据我观察，它们都以相同的频率运行。我意识到效果允许在适当的时间进行清理，但我只是对清理不是一个因素的情况感到好奇。

下面的 CodePen 显示了我正在谈论的内容。

https://codepen.io/benrhere/pen/GRyvXZZ

重要的部分是：

function EffectVsFunctionQuestion() {
  const [count, setCount] = React.useState(0);

  React.useEffect(()=>{
    console.log("incremented within hook")
  });
  console.log("incremented within component function")
...
}

我开始学习 React 并发现了代码片段，其中函数作为 useEffect 中的依赖数组传递。我想知道此类函数作为依赖项传递的用例以及为什么我们需要将该函数作为依赖项传递？

我有一个名为“Home”的组件，里面有一个 useEffect，其中有一个 console.log(“Home 组件已安装”)。我只是使用了一个常见的 useEffect 钩子。但是当我最初渲染页面时，我收到控制台日志两次，而不是在组件的初始安装中显示它。谁能告诉我我的代码发生了什么事。代码如下：

import React, { useEffect } from 'react';

const Home = () => {

  useEffect(()=>{
    console.log("Home component mounted")
  })

 return (
  <div className="container">
    <h1 className="h1">Home Page</h1>
  </div>
 )};

export default Home;

我有以下问题。我有一个组件需要在安装时调用 API。我在 useCallback 中进行调用，如下所示：

const sendCode = useCallback(() => {
        console.log('InsideSendCode');
    }, []);

然后我在 useEffect 中调用这个函数，如下所示：

useEffect(() => {
        sendCode();
    }, [sendCode]);

问题是，即使使用 useCallback，该消息也会在控制台中显示两次，我发现这将是唯一的选择。

我知道 StrictMode，但我不想禁用它。

如果每个人都能发表意见，那就太好了。

谢谢。

我目前正在从一个useEffect挂钩中的 CSV 文件加载 2000 多个对象。每次searchTerm更改时，CSV 文件中的所有数据都会重新加载和过滤。详情请参考以下代码：

  useEffect( () => {
    const asyncLoadWords = async () => {
      const dnd_words = await d3.csv(data_csv);
      const results = dnd_words.filter(wordObject => {
        return wordObject.??.toLowerCase().includes(searchTerm);
      });
      setSearchResults(results);
    }
    asyncLoadWords();    
  },[searchTerm]);

有没有办法在渲染之间保留 CSV 数据？我一直在考虑的一种可能的解决方案是创建一个子组件，它将 CSV 数据作为道具并通过useEffect.

任何投入将不胜感激。

我在 use effect 中有两个函数，我希望第一个函数只调用一次，如果“meetingArray”的状态改变，第二个函数调用每个渲染

useEffect(() => {
    getWeekMeetings();
     meetingArray();
}, []);

我该如何处理？

我使用 react 并且我有一个名为 isModalOpen 的状态。

const [isModalOpen, setIsModalOpen] = useState<boolean>(false);

Run Code Online (Sandbox Code Playgroud)

我有一个 useEffect 函数

useEffect(() => {},[]);

我希望每次当我的 isModalOpen 变为false（仅 false）时我的使用效果都会运行

我写

useEffect(()=>{},[!isModalOpen])

但是每次 isModalOpen 更改时都会运行此方法（真到假或假到真）

据我所知，useEffect 钩子最后作为 sideEffect 运行。我正在尝试控制台日志 data.main.temp。我可以理解它还不知道那是什么，因为它正在从后面运行的 useEffect 钩子中的 api 获取数据。

在 api 调用后，我如何能够访问或控制台日志 data.main.temp？（我觉得 setTimout 是作弊方式？）

import React, { useState, useEffect } from "react";
import Button from "../UI/Button";
import styles from "./Weather.module.css";
import moment from "moment";
import Card from "../UI/Card";

export default function Weather() {
  //State Management//
  const [lat, setLat] = useState([]);
  const [long, setLong] = useState([]);
  const [data, setData] = useState([]);

  //openWeather API key
  const key = "xxxxxxxxxxxxxxxxxxxxxxxxxx";

  useEffect(() => {
    const fetchData = async () => {
      //get coordinates// …