[英]State is not updating in useEffect why?
我正在尝试制作一个加密价格跟踪网站。 我每 10 秒更新一次 coinList变量prevData变量后获取数据。 我也想访问 useEffect 中的prevData变量,但在其中变量没有更新,它的值仍然是 []。 但是,如果我在useEffect之外使用 prevData,数据就会发生变化,我可以使用它。
我只想要更新的useEffect中 prevData 的值。
function App() {
const [coinsList, setCoinsList] = useState([]);
const [prevData, setPrevData] = useState([]);
let [width, setWidth] = useState(window.innerWidth)
useEffect(() => {
async function fetchData() {
const response = await fetch('api key').then(res => res.json())
setCoinsList(res);
setPrevData(res);
}
fetchData()
async function fetchData2() {
const res = await fetch('api key').then(res => res.json())
for (let i = 0; i < prevData.length; i++) {
if (res[i].current_price > prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`)
coin.classList.add('green')
console.log(coin)
// setTimeout(() => {
// coin.classList.remove('green')
// }, 1000)
} else if (res[i].current_price < prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`)
coin.classList.add('red')
console.log(coin)
// setTimeout(() => {
// coin.classList.remove('red')
// }, 1000)
} else {
let coin = document.getElementById(`${prevData[i].id}`)
console.log(coin)
coin.classList.add('blue')
// setTimeout(() => {
// coin.classList.remove('blue')
// }, 1000)
}
}
setPrevData(res);
setCoinsList(res);
}
setInterval(() => {
fetchData2()
console.log(prevData) // it is not updating
}, 10000)
}, [])
useEffect(() => {
window.addEventListener('resize', () => {
setWidth(window.innerWidth)
})
}, [window.innerWidth])
console.log(prevData) // it is updating
您在setInterval
scope 中关闭了prevData
值,您可以使用参考来修复它:
const prevDataRef = useRef();
// Keep the ref updates
useEffect(() => {
prevDataRef.current = prevData;
}, []);
// no closure
useEffect(() => {
setInterval(() => {
fetchData2(); // use prevDataRef.current
console.log(prevDataRef.current); // updated
}, 10000);
}, []);
在fetchData2
,您有prevData
state 的陈旧外壳。 它在区间回调 scope 中关闭。
一种补救方法是使用 React ref 和额外的useEffect
挂钩来缓存prevData
state 的副本,该副本可以在fetchData2
回调中访问。
function App() {
const [coinsList, setCoinsList] = useState([]);
const [prevData, setPrevData] = useState([]);
const prevDataRef = React.useRef(prevData);
useEffect(() => {
prevDataRef.current = prevData;
}, [prevData]);
...
useEffect(() => {
...
async function fetchData2() {
const prevData = prevDataRef.current; // <-- grab current value
const res = await fetch('api key').then(res => res.json());
for (let i = 0; i < prevData.length; i++) {
if (res[i].current_price > prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('green');
} else if (res[i].current_price < prevData[i].current_price) {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('red');
} else {
let coin = document.getElementById(`${prevData[i].id}`);
coin.classList.add('blue');
}
}
setPrevData(res);
setCoinsList(res);
}
setInterval(() => {
fetchData2();
}, 10000)
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.