reactjs - Lodash 延迟函数不允许我看到被调用函数内部的状态
问题描述
我正在使用 lodash 的延迟函数在特定时间段后调用我的函数 3 次,由于某种原因,我在该函数中看不到更新的 React 状态。这可能是什么原因?
import React, { useEffect, useState } from 'react';
import Delays from './helper';
import { delay } from 'lodash';
const App = () => {
const [progress, setProgress] = useState(0);
console.log(progress); // Here I can see the updated state
const testFunction = () => {
console.log('inside function', progress); // here I can't see the updated state
};
useEffect(() => {
const seconds = 40;
const attempts = 3;
const milliseconds = 4000;
setInterval(() => {
setProgress((prevProgress) =>
prevProgress >= 100 ? 100 : prevProgress + 1
);
}, seconds * attempts * 10); // 1200
for (let i = 0; i < attempts; i++) {
delay(testFunction, milliseconds * (i + 1));
}
}, []);
return <div>Hello World</div>;
};
export default App;
对我来说奇怪的是,如果我使用基于类的方法,那么我没有任何问题,并且状态的值将出现在我的函数中。
import React, { Component } from 'react';
import Delays from './helper';
import { delay } from 'lodash';
class App extends Component {
state = {
progress: 0,
};
udpateProgress = (value) => {
this.setState({ progress: value });
};
testFunction = () => {
console.log('inside function', this.state.progress); // here I can see the Updated state
};
componentDidMount = () => {
const seconds = 40;
const milliseconds = 4000;
const attempts = 3;
setInterval(() => {
this.udpateProgress(
this.state.progress >= 100 ? 100 : this.state.progress + 1
);
}, seconds * attempts * 10); // 1200
for (let i = 0; i < attempts; i++) {
delay(this.testFunction.bind(this), milliseconds * (i + 1));
}
};
render() {
console.log('inside render', this.state.progress);
return <div>Hello World</div>;
}
}
export default App;
解决方案
问题
这里的问题是您已经关闭了初始progress
状态值,因为您正在从在组件安装上运行一次testFunction
的循环过来。useEffect
一个办法
一个解决方案可能是使用 React ref 来保存当前状态值,然后您可以在testFunction
.
function App() {
const [progress, setProgress] = useState(0);
const progressRef = useRef(); // <-- ref to hold state value
const testFunction = () => {
console.log('inside function', progressRef.current); // <-- reference state value
};
useEffect(() => {
console.log(progress); // <-- log per update
progressRef.current = progress; // <-- cache state value
}, [progress])
useEffect(() => {
const seconds = 40;
const attempts = 3;
const milliseconds = 4000;
const timer = setInterval(() => { // <-- don't forget to save ref to interval timer
setProgress((prevProgress) =>
prevProgress >= 100 ? 100 : prevProgress + 1
);
}, seconds * attempts * 10); // 1200
for (let i = 0; i < attempts; i++) {
delay(testFunction, milliseconds * (i + 1));
}
return () => clearInterval(timer); // <-- to clear when component unmounts!!!
}, []);
return <div>Hello World</div>;
}
推荐阅读
- angular - Angular 6:“Observable”类型上不存在属性“catch”
'? - php - 我正在尝试使用 fetch_assoc() 但它给出了错误未定义的方法
- wordpress - 为什么插件在我的 html 到 wordpress 转换主题中不起作用?
- ionic-framework - 我想在我的应用程序中为 android 用户提供强制更新功能
- android - Android 清单合并失败
- r - R,如何一次操作多个数据框
- python - Python - 比较两个列表 - 打印结果
- angularjs - angular js 1.x orderBy 将 99 作为最大数字,即使有超过 400 条记录
- python - Django,int() 的无效文字,基数为 10:'user'
- python - 如何将函数应用于多个变量