反應使用狀態錯誤：重新渲染太多。 React 限制渲染次數以防止無限循環

Question

如何修復此“重新渲染次數太多”錯誤？
我正在使用 try、catch 方法、useState、setState 反應掛鈎。
我正在嘗試從 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

Answer 1

而不是onClick={setSelectedThm(index)}做onClick = {()=>setSelectedThm(index)}

onClick={setSelectedThm(index)}導致太多重新渲染，function 在渲染階段被調用。 不是直接調用 function，而是傳遞 function 的引用。