javascript react usestate错误:太多的重新渲染,React限制了渲染的数量以防止无限循环

eqqqjvef  于 2023-08-02  发布在  Java
关注(0)|答案(1)|浏览(139)

我如何修复这个'太多重新渲染'错误?
我使用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

6jjcrrmo

6jjcrrmo1#

而不是onClick={setSelectedThm(index)}onClick = {()=>setSelectedThm(index)}
onClick={setSelectedThm(index)}导致了太多的重新渲染,因为该函数在渲染阶段立即被调用。不应直接调用函数,而应传递 Package 函数的闭包以延迟其执行。

相关问题