我正在尝试新的React Hooks,并有一个带有计数器的Clock组件,该计数器应该每秒增加一次。但是,该值不会增加到超过一。
function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 0 :(得分:56)
原因是因为传递到setInterval
的闭包中的回调仅访问第一个渲染器中的time
变量,而无法访问新的time
值。随后的渲染,因为useEffect()
没有第二次被调用。
time
在setInterval
回调中始终为0。
就像您熟悉的setState
一样,状态挂钩有两种形式:一种是采用更新状态的形式,另一种是将当前状态传入的回调形式。您应该使用第二种形式并阅读setState
回调中的最新状态值,以确保在递增之前具有最新状态值。
奖金:替代方法
Dan Abramov,深入探讨了如何在其blog post中使用带有钩子的
setInterval
,并提供了解决此问题的替代方法。强烈建议阅读!
function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(prevTime => prevTime + 1); // <-- Change this line!
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 1 :(得分:6)
useEffect
函数在提供空输入列表时在组件安装中仅评估一次。
setInterval
的替代方法是每次更新状态时都用setTimeout
设置新的时间间隔:
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = setTimeout(() => {
setTime(time + 1);
}, 1000);
return () => {
clearTimeout(timer);
};
}, [time]);
setTimeout
对性能的影响微不足道,通常可以忽略不计。除非组件对新设置的超时会导致不良影响的时间敏感,否则setInterval
和setTimeout
方法都是可以接受的。
答案 2 :(得分:3)
执行以下操作可以正常工作。
const [count , setCount] = useState(0);
async function increment(count,value) {
await setCount(count => count + 1);
}
//call increment function
increment(count);
答案 3 :(得分:2)
另一种解决方案是使用useReducer
,因为它将始终传递当前状态。
function Clock() {
const [time, dispatch] = React.useReducer((state = 0, action) => {
if (action.type === 'add') return state + 1
return state
});
React.useEffect(() => {
const timer = window.setInterval(() => {
dispatch({ type: 'add' });
}, 1000);
return () => {
window.clearInterval(timer);
};
}, []);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 4 :(得分:2)
useRef 可以解决这个问题,这里有一个类似的组件,每 1000ms 增加一次计数器
import { useState, useEffect, useRef } from "react";
export default function App() {
const initalState = 0;
const [count, setCount] = useState(initalState);
const counterRef = useRef(initalState);
useEffect(() => {
counterRef.current = count;
})
useEffect(() => {
setInterval(() => {
setCount(counterRef.current + 1);
}, 1000);
}, []);
return (
<div className="App">
<h1>The current count is:</h1>
<h2>{count}</h2>
</div>
);
}
而且我认为 this article 会帮助你使用间隔作为反应钩子
答案 5 :(得分:0)
时间更改时告诉React重新渲染。opt out
function Clock() {
const [time, setTime] = React.useState(0);
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => {
window.clearInterval(timer);
};
}, [time]);
return (
<div>Seconds: {time}</div>
);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
答案 6 :(得分:0)
该解决方案对我不起作用,因为我需要获取变量并做一些事情,而不仅仅是更新它。
我有一个变通办法来获得带有承诺的钩子的更新值
例如:
async function getCurrentHookValue(setHookFunction) {
return new Promise((resolve) => {
setHookFunction(prev => {
resolve(prev)
return prev;
})
})
}
这样我可以像这样在setInterval函数中获取值
let dateFrom = await getCurrentHackValue(setSelectedDateFrom);
答案 7 :(得分:0)
假设我们以3秒(先进先出)的间隔显示通知,并且可以随时推送新消息。
import React, {useState, useRef, useEffect} from "react";
import ReactDOM from "react-dom";
import "./styles.css";
let x = 1 // for testing
const fadeTime = 3000 // 3 sec
function App() {
// our messages array in what we can push at any time
const [queue, setQueue] = useState([])
// our shiftTimer that will change every 3 sec if array have items
const [shiftTimer, setShiftTimer] = useState(Date.now())
// reference to timer
const shiftTimerRef = useRef(null)
// here we start timer if it was mot started yet
useEffect(() => {
if (shiftTimerRef.current === null && queue.length != 0) {
startTimer()
}
}, [queue])
// here we will shift first message out of array (as it was already seen)
useEffect(() => {
shiftTimerRef.current = null
popupShift()
}, [shiftTimer])
function startTimer() {
shiftTimerRef.current = setTimeout(() => {
setShiftTimer(Date.now)
}, fadeTime )
}
function startTimer() {
shiftTimerRef.current = setTimeout(() => setShiftTimer(Date.now), fadeTime )
}
function popupPush(newPopup) {
let newQueue = JSON.parse(JSON.stringify(queue))
newQueue.push(newPopup)
setQueue(newQueue)
}
function popupShift() {
let newQueue = JSON.parse(JSON.stringify(queue))
newQueue.shift()
setQueue(newQueue)
}
return (
<div>
<button onClick={() => popupPush({ message: x++ })}>Push new message</button>
<div>{JSON.stringify(queue)}</div>
</div>
)
}
const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);
答案 8 :(得分:0)
正如其他人所指出的那样,问题在于useState
仅被调用一次(因为其deps = []
被设置为间隔:
React.useEffect(() => {
const timer = window.setInterval(() => {
setTime(time + 1);
}, 1000);
return () => window.clearInterval(timer);
}, []);
然后,每次setInterval
滴答时,它实际上会调用setTime(time + 1)
,但是time
将始终保留其在setInterval
回调(关闭)时的初始值。定义。
您可以使用useState
的setter的另一种形式,并提供回调而不是要设置的实际值(就像setState
一样):
setTime(prevTime => prevTime + 1);
但是我鼓励您创建自己的useInterval
挂钩,以便您可以使用setInterval
declaratively来干燥和简化代码,如Dan Abramov在{{3}中建议的那样}:
function useInterval(callback, delay) {
const intervalRef = React.useRef();
const callbackRef = React.useRef(callback);
// Remember the latest callback:
//
// Without this, if you change the callback, when setInterval ticks again, it
// will still call your old callback.
//
// If you add `callback` to useEffect's deps, it will work fine but the
// interval will be reset.
React.useEffect(() => {
callbackRef.current = callback;
}, [callback]);
// Set up the interval:
React.useEffect(() => {
if (typeof delay === 'number') {
intervalRef.current = window.setInterval(() => callbackRef.current(), delay);
// Clear interval if the components is unmounted or the delay changes:
return () => window.clearInterval(intervalRef.current);
}
}, [delay]);
// Returns a ref to the interval ID in case you want to clear it manually:
return intervalRef;
}
const Clock = () => {
const [time, setTime] = React.useState(0);
const [isPaused, setPaused] = React.useState(false);
const intervalRef = useInterval(() => {
if (time < 10) {
setTime(time + 1);
} else {
window.clearInterval(intervalRef.current);
}
}, isPaused ? null : 1000);
return (<React.Fragment>
<button onClick={ () => setPaused(prevIsPaused => !prevIsPaused) } disabled={ time === 10 }>
{ isPaused ? 'RESUME ⏳' : 'PAUSE ?' }
</button>
<p>{ time.toString().padStart(2, '0') }/10 sec.</p>
<p>setInterval { time === 10 ? 'stopped.' : 'running...' }</p>
</React.Fragment>);
}
ReactDOM.render(<Clock />, document.querySelector('#app'));
body,
button {
font-family: monospace;
}
body, p {
margin: 0;
}
p + p {
margin-top: 8px;
}
#app {
display: flex;
flex-direction: column;
align-items: center;
min-height: 100vh;
}
button {
margin: 32px 0;
padding: 8px;
border: 2px solid black;
background: transparent;
cursor: pointer;
border-radius: 2px;
}
<script src="https://unpkg.com/react@16.7.0-alpha.0/umd/react.development.js"></script>
<script src="https://unpkg.com/react-dom@16.7.0-alpha.0/umd/react-dom.development.js"></script>
<div id="app"></div>
除了生成更简单,更简洁的代码之外,它还允许您通过传递delay = null
自动暂停(清除)间隔,并返回间隔ID(以防您要手动取消间隔)(不包括在内)在Dan的帖子中)。
实际上,也可以对此进行改进,以使其在不暂停时不重新启动delay
,但是我想对于大多数使用情况来说,这已经足够了。
如果您正在寻找setTimeout
而不是setInterval
的类似答案,请查看以下内容:Making setInterval Declarative with React Hooks。
您还可以找到setTimeout
和setInterval
,useTimeout
和useInterval
的声明性版本,以及在{{3 }}。