useEffect内部的React状态为空
useEffect是React中的一个钩子函数，用于处理副作用操作。副作用操作指的是与组件渲染无关的操作，例如数据获取、订阅事件、手动修改DOM等。
在React函数组件中，可以使用useEffect来执行副作用操作。useEffect接收两个参数，第一个参数是一个回调函数，用于定义副作用操作的逻辑；第二个参数是一个依赖数组，用于指定在依赖项发生变化时才重新执行副作用操作。
当第二个参数为空数组时，表示该副作用操作只在组件挂载和卸载时执行一次，类似于componentDidMount和componentWillUnmount的组合。在这种情况下，React状态为空是合理的，因为没有指定任何依赖项。
以下是useEffect内部的React状态为空的完善且全面的答案：
概念： useEffect是React中的一个钩子函数，用于处理副作用操作。
分类： useEffect可以分为两种情况：有依赖项和无依赖项。
优势：
- 灵活性：可以在函数组件中执行副作用操作，避免使用类组件的生命周期方法。
- 可读性：将相关的副作用操作放在一起，提高代码的可读性和可维护性。
- 依赖管理：通过依赖项数组，可以精确控制副作用操作的触发时机。
应用场景：
- 数据获取：可以在组件挂载时使用useEffect来获取数据，并在获取到数据后更新组件状态。
- 订阅事件：可以在组件挂载时使用useEffect来订阅事件，并在组件卸载时取消订阅。
- 手动修改DOM：可以在组件挂载时使用useEffect来执行手动修改DOM的操作。
推荐的腾讯云相关产品和产品介绍链接地址：
- 云函数（Serverless）：https://cloud.tencent.com/product/scf
- 云数据库（CDB）：https://cloud.tencent.com/product/cdb
- 云存储（COS）：https://cloud.tencent.com/product/cos
- 人工智能（AI）：https://cloud.tencent.com/product/ai
- 物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
以上是关于useEffect内部的React状态为空的完善且全面的答案。
相关·内容
我正在尝试使用react-plugin-react-hooks。
我有一个向window (onScroll)添加事件侦听器的useEffect。onScroll使用window.pageYOffset。
function onScroll() {
if (window.pageYOffset > 0) {
setFoor(bar)
} else {
setFoor(baz)
}
}
现在在useEffect中，我有：
useEffect(() => {
window.addEventListener('scrol
浏览 1提问于2019-11-06得票数 0
useeffect在每个重现器上运行，以防止我传递一个空数组
React.useEffect(()=>{},[])
并在状态改变上激发say效果，比如说计数状态变量
React.useEffect(()=>{},[count])
如果我有多个状态变量
React.useEffect(()=>{},[count, somethingelse])
我的问题是，如何知道是哪个状态变量导致了useeffect钩子的触发
浏览 10提问于2021-09-05得票数 0
我试图通过props将一个对象传递给子组件。该值是在useEffect钩子中设置的，在传递给子组件时会丢失。
我曾尝试在一个单独的函数中设置useEffect钩子之外的对象的值，但该值仍然丢失。
import React, { useState, useEffect } from 'react';
function SetValue(props){
let users = {};
useEffect(() => {
users = { user: 'bob' };
})
retur
浏览 2提问于2019-05-16得票数 41
回答已采纳
我从getUserCollection函数中获取图像URL列表，该函数返回诺言，最初状态在控制台中为空，但一旦从函数中获得响应，状态将在控制台中更新，但组件不会重新呈现更新后的状态。我知道，如果我建立一个单独的组件，并将状态作为支柱传递，那么它肯定会为更新的状态重新呈现。但是为什么它不在同一个组件中发生呢？有人能帮忙吗？同样，当我将state(userCollection)作为useEffect内部的第二个参数传递时，它将无限次运行。
import React, { useState, useEffect } from "react";
import { getUserColl
浏览 5提问于2020-05-02得票数 0
2回答
在FC组件中有以下代码：
我只想在组件挂载时调用Api并记录信息
对于空数组调用两次console.log，为设置相同值调用两次。
import * as React from"react";
import Header from"../components/Header";
import Search from"../components/Search";
import Categories from"../components/Categories";
import Carousel from"../component
浏览 2提问于2020-05-10得票数 10
回答已采纳
我可以加载我的数据，但只有在刷新页面之后。在此之前，它将显示我单击的上一项的数据。它的行为就像一个缓存。
这是我的mediaSlice
import { createSlice, createAsyncThunk } from "@reduxjs/toolkit";
import axios from "axios";
const KEY = process.env.REACT_APP_API_KEY
const BASE_URL = process.env.REACT_APP_BASE_URL
const HBO_SINGLE_MEDIA_API = `${
浏览 1提问于2022-04-28得票数 1
回答已采纳
2回答
当道具发生变化时，我很难得到一个组件来进行更新。我使用useEffect让它工作，但我不确定这是否是解决问题的正确方法。
这是我的密码：
import * as React from "react";
import "./styles.css";
const InputWithDefaultValue = (props: any) => {
const { value } = props;
//had to add this to get my component to rerender when the button in App-Compo
浏览 0提问于2020-09-09得票数 0
回答已采纳
我尝试简单地从localStorage获取状态编号，并在我的Nav组件中将其设置为quantity。但是，当我使用getItem时，我将一个空数组设置为State，但我不确定为什么。localStorage中的quantity必须在数组中设置才能工作吗？还是有什么别的事情在发生？
import React, { useState, useEffect } from 'react';
import './App.css';
import {Link} from 'react-router-dom'
function Nav() {
cons
浏览 59提问于2021-02-21得票数 0
假设我有下面的代码，它有一个useState钩子，它的默认值是一个空数组：
import React, { useState, useEffect } from "react";
export default () => {
const [fooData, setFooData] = useState([]);
useEffect(() => {
// some data fetching from and API happens here... example: setFooData(data);
// this is what I
浏览 34提问于2020-05-22得票数 0
回答已采纳
1回答
isAuthenticated总是空。
我正在尝试比较令牌过期与否，但isAuthenticated总是空的。
import React, {useEffect, useState} from 'react';
import {Navigate} from 'react-router-dom'
import jwtDecode from "jwt-decode";
interface IPrivateRoute {
children: React.ReactNode;
}
const PrivateRoute = ({children
浏览 10提问于2021-12-28得票数 0
回答已采纳
我正在尝试呈现必须通过useMemo传递的数据。我从api调用中获取数据，所以我调用了useEffect。初始呈现工作返回一个空数组，但一旦调用api，数据就不会更新。
import React from 'react'
import {fetchAccounts} from '../utils/api'
export default function Accounts() {
const [accounts, setAccounts] = React.useState([])
React.useEffect(() => {
setLo
浏览 1提问于2021-04-26得票数 1
回答已采纳
我的问题是，当自定义钩子使用useEffect与useState (例如，获取数据)时，自定义钩子返回陈旧的数据(从状态)，在依赖关系更改之后，但在useEffect被触发之前。
你能建议一种正确/惯用的方法来解决这个问题吗？
我正在使用React文档和这些文章来指导我：
我定义了一个函数，它使用useEffect，用于包装数据的获取--源代码是TypeScript而不是JavaScript，但这并不重要--我认为这是“按书”：
function useGet<TData>(getData: () => Promise<TData>): TD
浏览 0提问于2019-05-12得票数 5
1回答
在AllWords.js中，我有一个非常直观的react组件：
import React, { useEffect, useState } from 'react';
import consts from '../../constants/Constants.js';
function AllWords() {
const [words, setWords] = useState([]);
async function fetchData(){
const response= await fetch(consts.FETCH_UR
浏览 0提问于2021-07-29得票数 1
下面是我的组件函数： function RosterRows(props){
const [rosterList,setRosterList]=useState({});
const getData=async ()=>{
let roster=new Roster();
let rosterData=await roster.get(props.rosterYear,props.rosterMonth);
setRosterList(rosterData);
}
useEffect(()=>{
浏览 105提问于2020-12-01得票数 1
回答已采纳
import * as React from "react";
// import "./style.css";
export default function App() {
let [width, setWidth] = React.useState(window.innerWidth);
let [height, setHeight] = React.useState(window.innerHeight);
React.useEffect(() => {
console.log("us
浏览 14提问于2022-11-17得票数 2
1回答
我有以下两个组成部分。
<Foo>
<Bars/>
<Foo>
当调用Foo时，控制台显示：
call Bar useEffect
Warning: Cant perform a React state update on an unmounted component...
call Foo useEffect
call Bar useEffect again
这是代码，但它不会产生相同的警告，这可能是因为它在我的本地的开发模式。但它确实显示了空指纹。
是否不推荐/允许在每个组件中使用useEffect的组件结构？
如果可以的话，我需要更改什么来避免警
浏览 0提问于2021-06-30得票数 0
回答已采纳
我需要在两个表之间移动数据。我在父组件中获取数据，然后将数据向下传递到<Available/>。从这个组件中，我应该能够选择数据项并添加它(也可以添加到<Selected/>组件。添加后，该行应在Available中删除，并移至Selected。以类似的方式，我应该能够从<Selected/>组件中删除(也是全部删除)数据，而这些数据又应该放回到<Avaiable/>中。我使用react-table来实现网格目的。 我尝试过的代码：https://codesandbox.io/s/react-hooks-example-forked-0rqb9
浏览 15提问于2021-06-23得票数 0
回答已采纳
这段代码中的useEffect在每次窗口大小改变时都会运行，但是useEffect中的第二个参数是一个空数组，我认为只要第二个参数与上次相比没有变化，useEffect就不会运行 import React from "react"
export default function WindowTracker() {
const [windowWidth, setWindowWidth] = React.useState(window.innerWidth)
React.useEffect(() => {
windo
浏览 129提问于2021-11-19得票数 0
回答已采纳
2回答
根据我的理解，如果我使用下面的代码来检索我在消防局中拥有的东西，那么它应该是一个数组。我试过了
data.forEach((doc) => {
console.log(doc.id, " => ", doc.data());
});
来自google防火墙的标准示例代码。我发现控制台日志中的对象是我需要从db获取的数组。
现在，这是我的密码
import React, { useEffect, useState } from 'react';
import { getDocs, collection } from 'firebase/f
浏览 6提问于2022-07-02得票数 0
回答已采纳
1回答
我正在构建一个便笺应用程序。我希望保存用户在本地存储中输入的注释，以便即使在刷新页面之后也可以获得它。本地存储正常工作，但一旦我刷新本地存储中的项目，就会被删除。
const [notes, setNotes] = useState([]);
// This is the state variable that contains all the notes that are entered by the user.
useEffect(() => {
window.localStorage.setItem('react-notes-app-data', JS
浏览 6提问于2022-10-30得票数 1
1回答
我正在尝试执行一个使用react状态的函数，但是当状态发生变化时，该函数不会用状态值进行更新。
const {useState, useEffect} = React;
function Example() {
const [count, setCount] = useState(0);
const testFunction = function(){
setInterval(() => {
console.log(count)
}, 3000)
}
useEffect(() => {
let fncs = [
浏览 0提问于2022-03-16得票数 0
3回答
使用React钩子组件可以从父组件获取初始状态，并在每次内部状态更改时更新父级。
我认为，由于它总是相同的引用，所以不应该无限地调用孩子的useEffect。
如果子对象的初始状态是一个空对象，我将得到一个无限循环。
如果孩子的最初状态是从道具上取下来的，那么效果很好。
不知道是什么引起的。
您可以将子组件中的第一个useState更改为一个空对象，以使无限循环开始。
请查看下面的沙箱：
注意:我在沙箱中添加了一个计数器，以便在运行10次后停止循环，而不是使浏览器崩溃。
import React, { useState, useEffect, useCallback } from "
浏览 0提问于2020-10-13得票数 1
每次我使用react和useEffect方法时，我的状态变量呈现两次。一次为空变量，下一次为所需变量。现在和将来，我可以尝试什么来帮助避免这个问题？
import React, { useState,useEffect } from "react";
export default function Member (props) {
const [team,setTeam] = useState([]);
useEffect(() => {
let array = ["hello","hi"];
setTeam(a
浏览 0提问于2019-09-16得票数 0
我对Next.JS非常陌生，我试图用我的Next.JS应用程序来设置Redux。现在，我的页面应该显示我从API调用的帖子列表。当我从useEffect()发送数据到我的页面时，页面呈现得很完美，但是getStaticProps()或getServerSideProps()根本不工作！
下面是一些代码，它将给您一个提示，说明我到目前为止所做的工作：
store.js
import { useMemo } from 'react'
import { createStore, applyMiddleware } from 'redux'
import { compo
浏览 6提问于2020-12-05得票数 4
回答已采纳
我正在尝试在useEffect中使用useState。我想要访问和修改其中的一个状态( useEffect )，这里命名为isAuth，并根据新的状态呈现组件。
import React, { useState, useEffect } from 'react';
const Authentication = () => {
const [isAuth, setIsAuth] = useState(false);
useEffect(() => {
console.log(isAuth);
setIsAuth(tr
浏览 17提问于2019-08-16得票数 3
2回答
ProductTable.js
从“react”导入React，{ useEffect，useState }；
function ProductTable() {
useEffect(() => {
fetchData();
}
const fetchData = () => {
axios
.get("http://localhost:4000/api/products/product/viewAllProduct")
.then((res) => {
const getData = res.d
浏览 7提问于2022-11-08得票数 0
我使用带有<select>的react-hook-form来检测select中的更改，但是在填充select之后，该手表最初的值是错误的。 下面是一些代码来说明这个问题： import React, { useState, useEffect } from 'react';
import { useForm } from "react-hook-form";
function App() {
const { register, watch } = useForm();
const watchFoo = watch("foo"
浏览 31提问于2021-10-14得票数 0
回答已采纳
有问题时，当指向comp的标题状态为空时，如果我编辑代码并刷新其显示，如果我将状态添加到useEffect "itemCollectionRef，items“是一个inf循环，但是数据是它们的任何人都有更好的想法或方法从消防局获取数据以供显示。
import React, { useState, useEffect } from "react";
import { Grid, Box, Button, Space } from "@mantine/core";
import { ItemBadge } from "../../components
浏览 2提问于2022-07-14得票数 0
回答已采纳
下面是一个来自https://docs.expo.io/versions/latest/sdk/audio/的修改后的示例，用于在按下播放按钮时在两个声音之间迭代。 在本例中，use effect负责卸载声音(如果存在)。看起来像是 React.useEffect(() => {
console.log(`INSIDE: useEffect.`);
return sound
? () => {
console.log('Unloading Sound');
sound.unloadAsync();
浏览 25提问于2021-07-20得票数 0
2回答
我想改变setArray的状态，但我不能改变它。console.log显示空数组。其他州都在运作，但不是这样，我也使用过useEffect，但什么都没有发生。请给我一个解决办法。
import React from 'react';
import { Link} from 'react-router-dom'
import {useEffect} from 'react';
const Register = () =>{
const classes = useStyle();
const [name, setName]
浏览 0提问于2021-06-29得票数 0
回答已采纳
我是新的反应，我得到的Objects are not valid as a React child (found: object with keys {id, description, status, priority, created, deadline, emp}). If you meant to render a collection of children, use an array instead.错误，并跟随来解决这个问题。
在使用map函数运行对象时，我会得到空错误。在传递对象JSON.stringify()时，我将得到确保该API返回数据的字符串。
这是我的资料。
[
浏览 4提问于2022-07-23得票数 0
回答已采纳
我理解，没有依赖项，您就无法访问useEffect中的状态。一个这样的例子：
const [state, setState] = React.useState('')
const ws = new WebSocket(`ws://localhost:5000`)
React.useEffect(() => {
ws.onopen = () => {
console.log(state)
},[])
在本例中，state返回为空，尽管它在代码的其他部分中发生了更改。为了从原则上解决这个问题，我应该将state作为依赖项添加到useEffec
浏览 5提问于2022-01-19得票数 0
2回答
如何控制空输入？
我正在创建React中的第一个组件，并且在如何控制或检测输入为空时的逻辑方面存在问题。
其思想是根据输入的内容更改输入的类，即
如果输入不是空的，则将边框颜色更改为绿色，如果输入为空，则将边框的颜色更改为灰色。
当输入有文本时，逻辑工作，问题是当我删除输入的内容时，输入什么也不做，直到我再次写一封信时，“输入是空的”和“输入与数据”被激活。
为什么？
登录组件
const { useEffect, useState } = React;
const Login = function () {
const [formState, setformState] = use
浏览 3提问于2022-03-28得票数 0
回答已采纳
我正在尝试使用Typescript创建一个React功能组件，它将从API获取数据，然后将数据发送到另一个组件，但是，我得到了一个错误：" error : Too loop- renders . React限制呈现的次数，以防止无限循环。“ 请提供任何建议！ useEffect(() => {
await axios.get('https://quote-garden.herokuapp.com/api/v3/quotes/random').then((resp) => {
setQuote1(resp.data.data[
浏览 133提问于2021-10-05得票数 0
回答已采纳
我正在获取useEffect内部的数据，打算用获得的数据更新useState。即使控制台日志显示收到数据，我仍然在oneCrypto状态值中得到null。意识到这与useState中缺少第二个参数有关。当add []为空数组时，我的oneCrypto显示为空。当我在数组中设置oneCrypto作为依赖项时，我的应用程序崩溃了-太多的请求，控制台日志反复打印收到的数据，我不明白为什么……请帮帮忙。 import React, { useState, useEffect } from "react"
import { useParams } from "react-rou
浏览 36提问于2020-10-14得票数 0
回答已采纳
我正在使用React Hooks，当我为android背压处理程序创建事件侦听器时，回调函数处理程序中的状态为空！
在类组件中，它工作得很好！
'use strict';
import React, { useState, useEffect } from 'react';
import { BackHandler } from 'react-native';
import TextInput from '../../../../components/TextInput';
export default function Fo
浏览 0提问于2019-09-14得票数 4
因此，在使用useEffect调用依赖于状态的函数时，我会遇到以下情况。
示例：
// INSIDE APP COMPONENT
const [someState, setSomeState] = React.useState(0);
const [someTrigger, setSomeTrigger] = React.useState(false);
function someFunction() {
return someState + 1;
}
React.useEffect(() => {
const newState = someFunction();
浏览 0提问于2019-07-02得票数 10
回答已采纳
3回答
我有一个奇怪的问题，状态在我的反应应用程序。在这种情况下，我使用一个状态和一个useEffect。State用于存储从jsonplaceholder获取的posts。获取并设置在useffect中写入的状态，空数组作为依赖项的选项。
我甚至从jsonplaceholder中检索数据，它没有设置usestate。它显示空数组，这是初始值。
有时，当我保存代码时，它会更新，但是在刷新页面之后，它就会消失，并且不再更新，我甚至尝试了很多次。
但问题在于，react dev工具显示了状态更新的值，即所有的帖子。但是'console.log()‘没有显示数据。
告诉我为什么setpost()方法
浏览 6提问于2020-11-07得票数 0
就像标题所说的那样，我制作的useFetch自定义钩子返回了两次数据，这是什么意思？当我console.log我获取的数据时，有两个输出，一个是空值，另一个是我想要的数据，因为有空值的数据，这是一个问题，因为我不能用我想要的数据填充表。代码如下： import { useState, useEffect } from "react";
import axios from "axios";
const useFetch = (url) => {
const [data, setData] = useState(null);
const [loadi
浏览 20提问于2021-10-04得票数 1
回答已采纳
1回答
反应钩中的切换布尔状态
、、、、
当我运行以下代码并单击按钮时，我设法触发了useEffect函数：
const { useState, useEffect } = React;
const Example = () => {
const [bool, setBool] = useState(false);
useEffect(() => {
console.log(bool);
}, [bool]);
return (
<button
type='button'
onClick={() => {
setB
浏览 4提问于2021-09-30得票数 2
回答已采纳
我试图从用户那里获取数据，但它总是返回null，这里的问题是返回函数首先运行，所以getUser是空的--在返回提供程序之前，如何呈现useEffect？
这是我的代码：
import React, { useState, useEffect } from 'react';
import axios from '../axios'
export const UserContexts = React.createContext();
const UserContext = ({children}) => {
const [getUser, set
浏览 6提问于2022-05-21得票数 1
回答已采纳
当状态发生变化时，组件的更新程度如何？比方说，当状态A发生变化时，我可以读取render in组件的控制台日志。我想知道语句useState发生了什么，因为初始值被设置为1，因为不应该忽略初始值。当我调用someFunction时，a现在变成2，但是如果发生重命名，那么const a，setA = useState(1)会发生什么呢？
对于useEffect，当状态A发生变化时，我也认为useEffect是重新声明的(当然，依赖关系已经改变了！)，但是以前声明的useEffect版本会发生什么呢？
每当我单击该按钮时，都会生成useState和useEffect的新版本，这些对的旧版本会发生什
浏览 0提问于2021-04-09得票数 3
回答已采纳
我试着为一个反应应用程序创建一个用户区域，
如果用户登录，则数据存储在“userData”下的redux中，
我遇到的问题是，如果当用户没有登录时，suer会对用户区域进行访问，我希望应用程序将它们重定向到另一个“notloggedin”页面，
我有以下内容，但是我遇到的问题是，当路由第一次呈现时，userDetails返回一个空对象，该对象随后触发history.push('/notloggedin')。我可以看到是否删除history.push('/notloggedin')并在第一次加载组件时将其作为空对象加载userDetails，然后将重命名器加载为填
浏览 2提问于2020-11-15得票数 2
回答已采纳
1回答
我有一个名为useIsUserSubscribed的自定义钩子，它检查是否订阅了特定的用户。如果用户被订阅，则返回true，如果用户没有订阅，则返回false .
import { useState, useEffect } from "react";
import { useSelector } from "react-redux";
import { checkSubscription } from "../services";
// this hook checks if the current user is subscribed to
浏览 4提问于2021-11-24得票数 0
回答已采纳
我正在创建一个前和下一个按钮在我的反应应用程序。我正在尝试获取页面的当前索引(我有一个存储在对象中的页面列表)
这是密码
import React, { useState, useEffect } from "react";
function Preview({ match }) {
const [imageName, setImageName] = useState(); //IMPORTANT
const [images, setImages] = useState(); //IMPORTANT
const [currentIndex, setCurrent
浏览 0提问于2020-04-21得票数 0
1回答
我有简单的设置与出口和动态路线和路线改变，我想获取新的数据。
import React, { useEffect, useState } from 'react';
import { Link, Outlet, useParams } from 'react-router-dom';
export default function OutletContainer() {
const [apiResponse, setApiResponse] = useState(null);
let { outletComponentId } = useParam
浏览 1提问于2022-07-20得票数 1
回答已采纳
我使用useEffect()和Axios构建了一个react代码来从URL中获取一个json，但是我得到了一个空数组，可能是因为它不是异步函数。这是我的代码：
import axios from "axios";
import { useEffect, useState } from "react";
export function UseVacation (){
const[vacations, setVacations] = useState([]);
useEffect(() =>{
axios.get(
浏览 5提问于2021-12-02得票数 0
回答已采纳
1回答
到目前为止，我的组件尝试从API中获取数据一次，它将在数组correctAnswerArray中存储随机选择的对象(当前为10个)。我使用splice()来确保不随机选择相同的对象。我将这些随机选择的对象推送到新数组，然后尝试通过correctAnswer设置setCorrectAnswer(correctAnswerArray)状态。
当我在下一行记录状态时，状态(correctAnswer)仍然是空的。尽管如此，我不知道为什么当我所推到的correctAnswerArray中有项目时，状态是空的。任何帮助都将不胜感激。
import React, { useState, useEffect
浏览 2提问于2022-06-02得票数 -1
1回答
我有一个HoC，它接受组件的集合，并将它们包装在一个div中，这使得它们基本上是可滑动的。代码在浏览器中运行良好，但jest测试失败，并且智能感知显示使用useEffect的警告 import React,{useEffect} from "react";
export const swiper = (components) => {
const swiperHoc = props => {
useEffect(()=>{console.log('HocLogged')})
return <div>{comp
浏览 18提问于2020-02-02得票数 0
目前，我正在尝试使用Okta的React使用TypeScript构建一个应用程序，并且我选择使用功能组件而不是基于类的组件。
因此，我在根据用户经过身份验证的状态呈现应用程序菜单的部分内容时遇到了问题。文档显示使用useEffect()获取用户的身份验证状态，然后使用useState()存储基于该状态的用户信息。
这在实践中似乎很符合逻辑，也是一个好主意，但当我尝试使用以下组件时：
import React, { useState, useEffect } from 'react';
import { Dropdown } from 'semantic-ui-react
浏览 1提问于2021-07-19得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
