使用useEffect()和setTimeOut()进行条件渲染
问答内容： 在前端开发中，使用useEffect()和setTimeout()函数可以实现条件渲染。具体的步骤如下：
- 首先，我们需要在函数组件中引入React的useState和useEffect钩子函数，例如：
import React, { useState, useEffect } from 'react';- 接下来，我们可以定义一个状态变量来控制条件渲染，例如：
const [showContent, setShowContent] = useState(false);- 在useEffect()函数中，我们可以使用setTimeout()函数来延时改变showContent的值，例如：
useEffect(() => {
setTimeout(() => {
setShowContent(true);
}, 3000);
}, []);在上述代码中，useEffect()的第一个参数是一个回调函数，它会在组件挂载后执行。通过设置空的依赖数组([])，我们确保回调函数只会执行一次。在回调函数中，setTimeout()函数被用来在3秒后改变showContent的值为true。
- 最后，我们可以根据showContent的值来进行条件渲染，例如：
return (
<div>
{showContent && <p>条件渲染的内容</p>}
</div>
);在上述代码中，当showContent为true时，渲染一个段落标签。
总结： 使用useEffect()和setTimeout()进行条件渲染的步骤包括引入React的useState和useEffect钩子函数、定义一个状态变量来控制条件渲染、在useEffect()函数中使用setTimeout()函数延时改变状态变量的值、根据状态变量的值进行条件渲染。这种方式可以在组件挂载后延时执行条件渲染，提供更好的用户体验。
关联腾讯云产品： 腾讯云提供了丰富的云计算产品，其中与前端开发相关的产品包括云服务器CVM、轻量应用服务器Lighthouse、云开发CloudBase、内容分发网络CDN等。您可以访问腾讯云的官方网站（https://cloud.tencent.com/）了解更多信息和产品介绍。
相关·内容
我的react应用程序中有两个组件。其中一个是用于初始加载，它将显示一些加载动画，我希望这个组件渲染大约三秒钟，另一个组件只是一个计数器，我想在第一个计数器之后渲染它。如何使用useEffect()和setTimeOut()完成此操作？(或使用任何其他方法) function App() {
return(
<>
<Loading />
<Counter />
</>
)
}
浏览 175提问于2020-05-11得票数 1
回答已采纳
我正在尝试做的是，当第一次渲染时，我想要像使用useEffect和scrollToOffset一样向下滚动偏移量(493 但是如果我使用我的代码，它不能在第一次渲染时工作，但当第二次渲染时它就能工作了…如何在第一次渲染时运行？ 我应该修复哪些代码？ 这是我的代码 const TodoList = ({replycomment}) => {
const height = Dimensions.get('window').height;
const flatListRef = useRef()
useEffect(()
浏览 28提问于2021-03-17得票数 0
回答已采纳
2回答
我有一个功能组件，它应该是一个运行的时钟： import React,{useState,useEffect} from 'react';
import 'materialize-css/dist/css/materialize.min.css';
import { parseTime } from '../../Utils/utils'
const MainClock = (props) => {
const [timeString, setTimeString] = useState(parseTime(new Date()
浏览 92提问于2020-11-03得票数 4
回答已采纳
主要问题:我有更改视图onClick选项卡的页面；在第二个选项卡上，我希望开始显示带有信息的警报。
我的尝试:我的代码部分工作，我可以setTimeout，但我在条件渲染方面有问题。组件显示第一个选项卡上的第一个呈现，但不与单击tab交互。
useEffect(() => {
let timer1;
if (tabs === second_component) {
let timer1 = setTimeout(() => setAlertClose(false), 9000);
}
浏览 3提问于2022-11-16得票数 0
2回答
当一个组件加载时，我试图通过useEffect来设置地图的纬度和经度。问题是在将道具添加到useEffect之前，组件会加载和渲染。 useEffect(() => {
console.log(props.bandLocation)
// If I run this with a setTimeout it returns the data... but without the setTimeout it is an empty array. I need to set the latitude and longitude below to the data passe
浏览 16提问于2020-04-14得票数 1
3回答
我正在用反应钩做倒计时器。然而，我的倒计时计时器没有正确地停止在0。我想我可能在这里误用了useEffect()。
如何触发else条件？
而且，考虑到我的实现，哪些部分的反应可能不够好？
const App = () => {
const [seconds, setSeconds] = useState(5);
// useEffect is called
useEffect(() => {
if (seconds > 0){
setInterval(() => setSeconds((oldSeconds) => oldS
浏览 6提问于2021-06-10得票数 0
回答已采纳
我有一个应用程序，它在启动时检查用户id，并根据登录的用户加载待办事项列表。我只在data更改时更改useEffect，但我在useEffect()的主体中有setData，这意味着data更改，它会无限地重新运行。
但是，如果我在第二个参数中将[data]更改为[]，那么它将呈现一次，但每次添加待办事项时，我都必须刷新页面以使其呈现，而不是自动呈现。如何在不无限循环的情况下让它自动渲染？
const [data, setData] = useState([])
useEffect(() => {
UserService.getUserById(localStorage.get
浏览 0提问于2021-01-23得票数 0
1回答
我有一个纯功能组件，在这里我使用useEffect获取一些数据。我将一个空字符串传递给useEffect，因此它的作用就像一个组件挂载一样。
const getData = () => {
setTimeout(() => {
setLocalState({ a: 2 });
setIsLoading(false);
}, 0);
};
useEffect(() => getData(), []);
我的整个组件现在重新呈现两次。我想控制这种行为，并且只在特定的条件下重新渲染。
在这里，当reRender设置了localSta
浏览 0提问于2019-03-06得票数 3
2回答
我要实现的是将从api获得的数据作为响应显示在第一次渲染本身的排序顺序中。 这就是我使用useEffect钩子的方式： useEffect(()=>{
async function fetchProject() {
await axios.post(envurls.wv+'/show_project',{
params:{
authtoken:authtoken,
user:user
}
浏览 30提问于2021-04-20得票数 0
回答已采纳
2回答
我有一个组件来呈现一个带有对象的表。此组件显示一个按钮，当按下该按钮时，该按钮将向父对象发送特定对象。父级必须在状态中设置它以显示一些图形内容。渲染工作正常，我不明白的是，为什么在正确设置状态后，我会得到一个过时的值。--它不是一个争用条件，React只是忽略了一个变量的更新值，即使它重新正确地呈现了组件。
一个最小的例子是：
import { useState } from "react";
import { SomeComponent } from "./SomeComponent";
export default function App() {
c
浏览 4提问于2022-07-12得票数 1
回答已采纳
你好，我是ReactJs的新开发人员。我有一个关于useEffect渲染的问题。我有一个例子，我试图随着时间改变背景图像，但useEffect渲染了太多，我的背景图像随着时间循环。我只想改变我的图像的顺序，如bg1，bg2，bg3等，我如何解决这个无限渲染？ 我的示例.tsx import React, { useEffect, useState } from 'react';
import { connect } from "../../../store/store";
const LeftPart = (props: any) => {
浏览 8提问于2020-04-13得票数 0
回答已采纳
我想要一个组件每隔5秒重新渲染一次，并在相应的索引处显示数组，数组长度已知恰好是10。
以下是我到目前为止所做的：
const GameCard = ({ gameArray, startGame }) => {
const [arrayIndex, setArrayIndex] = useState(0);
let {questionWord} = gameArray[arrayIndex] ;
useEffect(() => {
if(!startGame) return;
let timer = setTimeout(() =>
浏览 0提问于2019-10-28得票数 0
尝试让预加载器显示、淡出，然后显示新路由。该怎么做呢？现在页面正在闪烁，然后预加载器显示，并淡出到新的路由。 我正在尝试使用带有useEffect(() => {...}，location)的useLocation，但是它导致了闪光。 在路由器级别，我让它在主体中添加一个加载类，以便预加载器显示出来。一旦安装了路由组件，我就会删除那个类。但是，在路径渲染之后，触发位置更改的useEffect似乎正在被调用。
浏览 23提问于2020-12-11得票数 0
1回答
我试着在一个接一个的second.But中将arr的加载设置为false，html中的渲染函数似乎与react dev工具中的state不同。下面是代码和代码片段。 import { useEffect, useState } from 'react';
const App = (p: any) => {
console.log('render!!');
const [arr, setArr] = useState([{}, {}, {}, {}]);
useEffect(() => {
changeArr();
},
浏览 8提问于2021-09-28得票数 1
1回答
我正在学习React，并试图编写一个异步钩子。在useEffect中使用setResult似乎不起作用。当我尝试呈现结果时，什么也没有，所以我添加了一些控制台日志记录，以查看发生了什么。useState钩子中的设置器函数似乎没有做任何事情。我一直在关注this video以获取一些指导，并且我的代码并没有太大的不同。 我有以下组件： import React, { useState, useEffect } from 'react'
const Search = () => {
const [search, setSearch] = useState('&
浏览 16提问于2019-09-27得票数 1
好的，那么： useEffect(() => {
}, [props.lang]); 每次使用props.lang更改时，我应该在useEffect中做些什么来重新渲染组件？
浏览 23提问于2019-09-20得票数 17
回答已采纳
1回答
问题：当我移除useEffect中的依赖数组时，计时器永远不会停止。但是，当我在useEffect中添加依赖数组时，计时器就会卡在5上。
我怎么才能解决这个问题？
const App = () => {
const [inputValue, setInputValue] = useState("");
const [target, setTarget] = useState([]);
const [score, setScore] = useState(0);
const [timer, setTimer] = useState(5);
const
浏览 3提问于2022-04-11得票数 1
回答已采纳
我有这些路由器 function Rutas(){
<Provider store={store}>
<Router>
<Switch>
<Route exact path="/">
<Home />
</Route>
<Route path="/about">
<About />
</Route>
</Switch>
<
浏览 26提问于2021-09-23得票数 0
在我的React应用程序中，我将在单个组件中多次实现useState。然后，在我的useEffect中，我将更改其中几个的状态： import React, { useState, useEffect } from 'react';
const Projects = React.memo(function (props) {
const [someState1, setSomeState1] = useState(false);
const [someState2, setSomeState2] = useState(false);
const [
浏览 50提问于2020-04-15得票数 2
回答已采纳
2回答
我正在尝试实现一个图像幻灯片。setInterval在useEffect内部用于在x秒后更改图像。currentImage状态保存当前图像，x秒后，它将更改为下一个图像，但react告诉我，每次呈现后索引变量将丢失。
const images = [one, two, three, four, five, six, seven];
const [currentImage, setCurrentImage] = React.useState();
let index = 0;
useEffect(() => {
setInterval(() => {
浏览 1提问于2021-10-05得票数 0
我在useEffect中获得了对象数组：
然后我试着绘制它并渲染：
我得到的结果是它没有渲染它。首先，默认情况下它是一个空数组，而当状态在useEffect中发生变化时，它不会重新修改它。为什么以及如何解决这个问题？(Next.js + React.js可能会出现一些问题吗？)
浏览 11提问于2022-11-11得票数 0
回答已采纳
2回答
在类组件中，setState()方法可以接受回调函数，但在函数组件中，当我回调setState时，会出现以下警告:警告:来自useState()和useReducer()钩子的状态更新不支持第二个回调参数。要在渲染后执行副作用，请使用useEffect()在组件体中声明它。我需要我的状态设置，然后页面将重定向。但我一点也不知道。
浏览 90提问于2019-11-27得票数 10
回答已采纳
1回答
如果代码是异步的，如果像setCount(count + 1)一样调用，为什么count的值只计算一次？
当您按下Increment Count Twice Async Naive按钮时，它会触发两个timeOut()，一个延迟500ms，另一个延迟1000ms。因此，我认为既然第一个timeOut触发了通过setCount(count + 1)的重新呈现，那么应该在第二个timeOut中更新count的值吗？因为500ms是足够的时间来执行操作，并且重新渲染应该会在第二个timeOut的函数被调用时更新count。
如果您将函数传递给setCount，则第二个按钮Increment Coun
浏览 1提问于2020-06-15得票数 1
我在使用useEffect钩子时遇到了问题。
我得到的错误呈现比之前的渲染更多的钩子。
我的代码如下：
const { id } = router.query;
const { data: recipe } = useRecipe(id);
if (recipe) {
useEffect(() => {
if (typeof post.title === "string") {
setTitle(recipe.title);
}
}, [recipe]);
}
if (!recipe) {
浏览 3提问于2022-01-09得票数 0
回答已采纳
16回答
我正在尝试使用throttle方法来自lodash在功能组件中，例如： const App = () => {
const [value, setValue] = useState(0)
useEffect(throttle(() => console.log(value), 1000), [value])
return (
setValue(value + 1)}>{value}
)
} 由于内部的方法useEffect在每次渲染时重新声明，则限制效果不起作用。 有谁有简单的解决方案吗？
浏览 384提问于2019-02-13得票数 99
回答已采纳
1回答
当组件渲染时，我必须填充对象，然后显示信息。现在我试着这样做，但是有一个错误，我想是因为当我试图渲染信息对象时仍然是空的。如何解决此问题？
console.log shows
{}
{}
{name: "Name"}
{name: "Name"}
export const UserCard: React.FC = () => {
let [mainInfo, setMainInfo] = useState({});
useEffect(() => {
setMainInfo({
name: "Name"
浏览 3提问于2020-10-17得票数 1
对于这些值，我有多个要听的值和要执行的不同操作。问题是我不知道防止它们在第一次渲染时运行的最佳方法是什么。假设我有：
const [firstValue, setFirstValue] = useState();
const [secondValue, setSecondValue] = useState();
const [thirdValue, setThirdValue] = useState();
const [fourthValue, setFourthValue] = useState();
const [fifthValue, setFifthValue] = useState(
浏览 14提问于2022-02-28得票数 1
回答已采纳
我有以下状态变量
const [value, setValue] = useState(0);
和useEffect钩
let intervalID;
useEffect(() => {
intervalID = setInterval(() => {
setValue(value => value+1);
}, 100)
}, [])
我希望setInterval函数在value到达100时停止；如何实现这一点？
我试过if(value < 100 ) clearInterval(intervalID)在setInterval里面，但没有成功。
浏览 6提问于2022-01-06得票数 0
我想创建一个完全由其状态控制的组件Person。它还应该能够同步从其父组件传递到状态的属性更改(firstName，lastName)。我有以下代码。它做了我想要的，那就是同步道具到状态，并在状态改变后重新渲染。
然而，我注意到的一个问题是，useEffect在由父属性更改触发的DOM更新之后被调用。因此，最初的重新渲染是浪费的，因为我只想在调用useEffect并更改状态后重新渲染它。
import React,{useState, useEffect} from 'react';
const Person = ({firstName, lastName}) =>
浏览 0提问于2020-04-30得票数 2
因此，假设我有以下字符串数组： const types = [
"type1",
"type2",
"type3" ] 然后我还有一个像这样的useEffect钩子： useEffect( () => {
if (someOtherString in types) { doSomething...}
}, [someOtherString]) 上面的useEffect钩子的问题是，它会要求添加对“类型”变量的依赖。因此，如果我将其添加到依赖项列表中： ,[someOtherString, types]) 它
浏览 44提问于2020-09-02得票数 0
我已经做了一个小秒表组件使用钩子在反应。这是演示问题的最小代码。
查看名为resetTicks的函数。它有两个设置器，setTicks和setTicking，只有setTicking工作，即时钟暂停，有趣的是，如果我再次单击按钮，它才会重置时钟。我试着重新安排对两个设置者的调用，但都没有结果。
const StopWatch = () => {
const [ticks,setTicks] = useState(0);
const [ticking,setTicking] = useState(false);
useEffect(() => {
setTimeo
浏览 6提问于2020-07-03得票数 1
回答已采纳
1回答
setTimeout返回一个数字，timeoutId，它被clearTimeout用来标识和删除它。
但是，如果要有条件地设置超时，应该使用什么值？0是安全的身份证吗？
它用于反应上下文，其中清除超时通常被认为是良好的实践。
useEffect(() => {
const timeout = success ? setTimeout(() => foo(), 300) : defaultVal;
return () => clearTimeout(timeout);
}, [success]);
或者，是否最好将整个事件包装在一个大的条件下，并完全避免默认值？
us
浏览 8提问于2022-11-24得票数 0
回答已采纳
我正面临着一个相当奇怪的问题。下面是代码
const Counter = () => {
const [count, setCount] = useState(0);
useEffect(() => {
const id = setInterval(() => setCount(count => count + 1), 1000);
return () => {
clearInterval(id);
};
}, []);
return <div>{count}</div>;
};
据我
浏览 0提问于2020-01-21得票数 2
取决于一个变量，我希望实现条件呈现。源代码：
我的变量
设hideDeleteButton = false;
useEffect -检查变量的值
useEffect(() ) => { if (projects?.length === 0= useCases?.length === 0) { hideDeleteButton = false；}==== true；}，[]；
条件渲染
const {t('catalogPage.componentDetails.actionBar.deleteComponent')} = () => hideDeleteButton
浏览 0提问于2021-02-04得票数 1
回答已采纳
我的React组件之一就是行为不端。在某种意义上，当状态设置为true时，它呈现错误的HTML代码 import React, { useState, useEffect } from "react";
import { Redirect } from "react-router-dom";
import Brand from "./Brand";
import Navbar from "./Navbar";
import axios from "axios";
const EmailConfirmed = (
浏览 24提问于2021-02-07得票数 0
回答已采纳
1回答
在我的中，我在我的useEffect中使用了一个依赖数组，并且希望在值发生变化时重新修改。但我希望在2到3秒后重拍。目前，它立即改变，这是添加了一些闪烁的问题在我的应用程序。现在，这里是我目前的useEffect：
useEffect(() => {
fetchClimate();
setCount(count + 1);
if (rooms.length >= 1 && count < 2 && displayRoomList) {
setActive(ro
浏览 12提问于2021-12-08得票数 0
我仍然在试图弄清楚react如何处理渲染，这个特殊的行为让我整天都在挠头。当我运行这段代码时，我得到了3个控制台日志。第一个是null，因为useEffect尚未运行，这是意料之中的。接下来，我如期从我的api调用中获得了获取的worldData数组。然而，我随后得到了第三个控制台日志，其中包含相同的数组，这让我相信我的组件正在被重新呈现。如果我添加另一个set state和另一个api调用，我会看到另一个控制台日志。
function App() {
const [worldData, setWorldData] = useState(null)
const [countriesD
浏览 4提问于2021-02-09得票数 0
4回答
在我现有的react组件中，我需要在特定时间内呈现另一个react组件。一旦父组件挂载/或数据加载，新组件(或子组件)应在1-2秒后可见，然后再过几秒钟，新组件应该被隐藏。只有在没有数据的情况下才需要这样做。
这就是我目前试图达到的目标：
import React, { useState, useEffect } from "react";
function App() {
const [showComponent, setShowComponent] = useState(false);
const sampleData = [];
useEffect(()
浏览 4提问于2022-02-11得票数 1
回答已采纳
我收到这个错误-无法在卸载的组件上执行React状态更新。这是一个no-op，但它表明您的应用程序中存在内存泄漏。要修复此问题，请在useEffect清理函数中取消所有订阅和异步任务。 这是我的useEffect钩子，我使用一个名为mounted的引用来检查组件是否已卸载，但在组件卸载时仍然收到错误。(大约需要一分钟时间才能显示错误)。 useEffect(() => {
if(mounted.current){
if(mincounter === 0 && hrcounter > 0){
浏览 48提问于2020-08-16得票数 4
回答已采纳
我试图在数据加载时为area创建一个占位符。它应该从x轴“增长”。我创建了简单函数组件，如下所示 const [visible, setVisible] = useState(false);
useEffect(() => {
setVisible(true);
}, []);
return(
<Area
....
y0={d => visible ? d.y : 0}
/>
) 问题可能是，React正在批量处理状态更新-所以有时图形实际上是“增长”的，但有时它会立即出现。有没有办法强制渲染初始状态？或其他解决方法？
浏览 21提问于2020-03-28得票数 0
我想向alert显示消息已经发送(202个)或屏幕上有错误(其他)，但是这条消息在3秒后应该是干净的。
我通常只在useEffect钩子中使用它，但是我想把它放在一个条件下。
if (res.status === 200) {
setTimeout(function() {
setStatus('success')
}, 1000);
更新：
我试过建议的代码片段，但不起作用。使用[res...]解决方案会导致错误，因为react看不到这样的变量。我继续编写这段代码，添加与res关联的if语句新变量.但仍然不起作用
浏览 6提问于2022-06-21得票数 0
我试图将我的组件分离出来，这样我就不会在渲染函数调用中获取数据。 到目前为止，我有两个功能组件： const Comment = ({data}) => (
<React.Fragment>
{data.map((comment, i) => (<li id={comment.id}>{comment.user.displayName}:{comment.text}</li>))}
</React.Fragment>
);
const IssueComment = ({comment}) =>
浏览 14提问于2020-11-07得票数 0
回答已采纳
我有一个加载栏组件，我可以使用下面的代码导入： import { CircleToBlockLoading } from "react-loadingg"; 我尝试这样使用它，我确信这是不正确的，因为它不会呈现任何内容 useEffect(() => {
const timer = setTimeout(() => {
return(
<CircleToBlockLoading />
)
}, 1000);
return () => clearTimeout(timer); }，[])； 以下是此外部加载栏库的链接和文档链接： Thi
浏览 16提问于2021-06-15得票数 2
我有两个UI函数组件，我希望它们是同步的，我的意思是，当第一个组件呈现完成后，它将被删除到DOM中，然后第二个组件将被呈现。
import React, {useEffect, useState} from "react";
import Home from "./Home";
import Loading from "./Loading";
export default function Web() {
const [beforeLoad, setBeforeLoad] = useState(false);
useEffect(()
浏览 2提问于2022-10-24得票数 0
回答已采纳
1回答
目前，我正在进行一个项目，在那里我使用react和redux来构建它。
场景
有一个切换按钮，它将在Group和My之间切换。这两种方法都将命中api并加载数据(票证列表) .i.e。2个独立实体--
现在有一个搜索框，它将根据我输入的值给出结果。我添加了“”，即在2秒后，onChange事件将触发，它将向所有减速器发送一个动作。
问题
比方说，我在组队列下搜索一个值(68)，它工作得很好。现在，如果我切换到我的队列，SearchBox值应该是null.but，正如我告诉过的，这两个队列都是独立的实体，如果我切换，搜索框的值应该会消失，但它不会消失。
原因
i存储搜索框值和计时器的状
浏览 1提问于2020-10-31得票数 0
尝试基于宽度为滑块实现一些自定义滚动行为。它使用useState来跟踪滑块中的当前页面和总页面。这是我试图实现它的代码，但它有一些意想不到的行为。
const [isTimeoutLocked, setIsTimeoutLocked] = useState(false)
const handleScroll = useCallback(() => {
const gridContainer = document.querySelector(".grid");
const totalPages = Math.ceil(
grid
浏览 4提问于2021-01-08得票数 1
2回答
我正在创建一个带有React的应用程序，我正在与状态变量进行斗争。举个例子：
import { useEffect, useState } from "react";
export default function App() {
const [a, setA] = useState(["inital"]);
useEffect(() => {
setTimeout(() => {
setA(["hello"]);
}, 1000);
setTimeout(() => {
浏览 9提问于2022-07-28得票数 0
回答已采纳
考虑一下React中useEffect的这两种用法：
useEffect(() => {
setSomeState(complexComputation(someDependency));
}, [someDependency]);
vs
useEffect(() => {
setTimeout(() => {
setSomeState(complexComputation(someDependency));
}, 0);
}, [someDependency]);
它们实际上做了同样的事情，但技术上的区别是，在第一种情况下传递给useEffect的函数是
浏览 3提问于2020-12-09得票数 1
正如我在下面展示的，react子渲染每次它的父渲染时都会渲染。这是为什么，这是一个问题吗？另外，我怎样才能避免它，以致于只有当它的优点改变时，子对象才会重新渲染。 import React, {useEffect, useState} from 'react';
function App() {
return (
<div>
<Main></Main>
</div>
);
}
export default App;
function Main() {
const [count
浏览 38提问于2020-04-29得票数 1
2回答
我使用useMemo钩子来渲染地图项目。我在useMemo钩子中添加了items参数，基于它将呈现的项目更改。但是改变加载状态和项目改变，项目自定义组件渲染两次。我在使用useMemo钩子时有没有做错，请纠正我。
Home:
import React, { useState, useEffect, useMemo } from "react";
import Item from "./Item";
const array = [1];
const newArray = [4];
const Home = () => {
const [items,
浏览 3提问于2021-09-24得票数 5
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
