[英]react usestate Error: Too many re-renders. React limits the number of renders to prevent an infinite loop
How do I fix this 'Too many re-renders' error?如何修复此“重新渲染次数太多”错误?
I'm using try, catch method, useState, setState react hooks.我正在使用 try、catch 方法、useState、setState 反应挂钩。
I'm trying to get data from api and print on web.我正在尝试从 api 获取数据并在 web 上打印。
Error occurs here: setEmoticonThm(newEmoticonThms)这里出现错误:setEmoticonThm(newEmoticonThms)
Error: Too many re-renders.错误:重新渲染太多。 React limits the number of renders to prevent an infinite loop. React 限制渲染次数以防止无限循环。
const [emoticonThm, setEmoticonThm] = useState([]);
const getToken = async () => {
try {
const emoticon = await axios.get(`${process.env.EMOTICON_ENDPOINT}`, {
headers: {
Authorization: accessToken
}
})
let newEmoticonThms = []
emoticon.data.emoticonPacks.map( (emoticon) => {
newEmoticonThms.push({
id: emoticon.id,
image:url + emoticon.image
})
})
setEmoticonThm(newEmoticonThms)
} catch (err) {
console.log(err)
}
}
const onClickSticker = () => {
getToken()
handleKeyboardOpen()
}
return (
...
<Sticker onClick={onClickSticker}/>
<TabContainer>
{emoticonThm.map((emoticon, index) => {
return (
<EmoticonThmButton
key={index}
onClick={setSelectedThm(index)}
>
<EmoticonThmImage
key={index}
onClick={onEmoticonClick}
src={img}
/>
</EmoticonThmButton>
)
})}
</TabContainer>
)
I added my code.我添加了我的代码。 How can I get it right?我怎样才能做对? TT TT
Instead of onClick={setSelectedThm(index)}
do onClick = {()=>setSelectedThm(index)}
而不是onClick={setSelectedThm(index)}
做onClick = {()=>setSelectedThm(index)}
onClick={setSelectedThm(index)}
is causing too many rerenders, the function gets called on the rendering phase. onClick={setSelectedThm(index)}
导致太多重新渲染,function 在渲染阶段被调用。 Instead of directly calling the function, you just pass the reference of the function.不是直接调用 function,而是传递 function 的引用。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.