如何使用 React 在映射的 function 中的各個元素上設置 state？

Question

我知道有人問過類似的問題。 但我仍在努力思考它。 基本上我是通過一些數據進行映射——當用戶點擊“添加更多”時，它基本上會顯示前一個元素的副本。 我有一個工具提示——當用戶懸停或點擊工具提示時，它會顯示一條消息。 不幸的是，工具提示顯示所有映射元素（我只想顯示當前元素）。

問題是我使用的是 ChakraUI 庫，我需要傳遞 true/false 來顯示工具提示。 我找到了一些建議將索引傳遞給 state 的答案，但我只能傳遞“真”或“假”，這讓我想知道如何將索引傳遞給 boolean state 變量。

這是代碼 - 任何提示或指導將不勝感激。 我對如何解決這個問題一無所知。

isOpen={}負責顯示（或不顯示）工具提示中的信息

  const [stackableTooltip, setStackableTooltip] = useState(false)

return (
<>
{data.map(index => {
                        <Flex>
                          <Tooltip
                            label={t('tooltip.stackable')}
                            isOpen={stackableTooltip}
                          >
                            <img
                              src={stackable}
                              onMouseEnter={() => setStackableTooltip(true)}
                              onMouseLeave={() => setStackableTooltip(false)}
                              onClick={() => setStackableTooltip((open) => !open)}
                            ></img>
                          </Tooltip>
                        </Flex>
})}
</>
)

簡而言之，我需要一種方法將索引添加到 state

Answer 1

將其移動到自定義組件

export default function  ImageContainer () {
  const [stackableTooltip, setStackableTooltip] = useState(false)

  return  ( <Tooltip label={t('tooltip.stackable')} isOpen= {stackableTooltip}>
    <img
      src={stackable}
      onMouseEnter={() => setStackableTooltip(true)}
      onMouseLeave={() => setStackableTooltip(false)}
      onClick={() => setStackableTooltip((open) => !open)}
    ></img>
  </Tooltip>)

}

在主要組件中調用這個 function

return ( <>
  {data.map(index =>  
           <Flex>
            <ImageContainer />
           </Flex>
  )}
 </>
)