[英]React code keeps rerendering after changing state
this code keeps rerendering the page on every state change and when I add an image it keeps rerendering infinitely without errors此代码在每次状态更改时不断重新渲染页面,并且当我添加图像时,它会无限地重新渲染而不会出错
const [adData, setAdData] = useState({
name: "",
link: "",
fromDate: {},
toDate: {},
fromTime: {},
toTime: {},
iconEn: null,
allViews: 0,
userViews: 0,
});
const [iconEN, setIconEN] = useState(null);
const [currentEnImg, setCurrentEnImg] = useState(null);
const handleOnChange = (e) => {
setAdData({ ...adData, [e.target.name]: e.target.value });
};
const handleOnCheck = (e) => {
setAdData({ ...adData, [e.target.name]: e.target.checked});
};
if (iconEN) {
const reader = new FileReader();
reader.onload = () => {
setCurrentEnImg(reader.result);
setAdData({ ...adData, iconEn: iconEN });
};
reader.readAsDataURL(iconEN);
}
what am I doing wrong and how to fix it.我做错了什么以及如何解决它。
you can just add useEffects hook when page load您可以在页面加载时添加 useEffects 钩子
useEffect(()=>{
/*
Query logic
*/
console.log('i fire once');},[]);
in this hook call your that function which call when entering the page after use, this code does not render every time when change state it might help在这个钩子中调用你在使用后进入页面时调用的那个函数,这段代码不会在每次改变状态时呈现它可能有帮助
Issue is here:问题在这里:
if (iconEN) {
const reader = new FileReader();
reader.onload = () => {
setCurrentEnImg(reader.result);
setAdData({ ...adData, iconEn: iconEN });
};
reader.readAsDataURL(iconEN);
}
every state set function re-render the application and on every re-render the same state set function is called that makes this process as a never ending loop.每个状态集函数都会重新渲染应用程序,并且在每次重新渲染时都会调用相同的状态集函数,这使得这个过程成为一个永无止境的循环。
Solution: try useEffect hook with a proper dependency
variable or []
and this problem will be solved.解决方案:尝试使用适当的
dependency
变量或[]
useEffect钩子,这个问题将得到解决。
In your case put your login inside useEffect like:在您的情况下,将您的登录名放在 useEffect 中,例如:
useEffect(() => {
if (iconEN) {
const reader = new FileReader();
reader.onload = () => {
setCurrentEnImg(reader.result);
setAdData({ ...adData, iconEn: iconEN });
};
reader.readAsDataURL(iconEN);
}
}, []);
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.