我如何修复这个'太多重新渲染'错误?
我使用try、catch方法、useState、setState react钩子。
我正在尝试从API获取数据并在web上打印。
此处出现错误:setEmoticonThm(newEmoticonThms)
错误:重新渲染太多。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>
)
我添加了我的代码。我怎样才能把它做对呢?TT
1条答案
按热度按时间6jjcrrmo1#
而不是
onClick={setSelectedThm(index)}
做onClick = {()=>setSelectedThm(index)}
onClick={setSelectedThm(index)}
导致了太多的重新渲染,因为该函数在渲染阶段立即被调用。不应直接调用函数,而应传递 Package 函数的闭包以延迟其执行。