Блог

Я пытаюсь использовать перехваты React для обновления состояния массива.

В принципе, у меня есть список:

const hatList = ['🎩', '👒', '🎓', '🧢', '⛑', '🪖' ]

Я хочу прокручивать этот список каждый раз, когда я делаю onClick :

 <Button
  className="btn"
  btnText="Show Me Missing Koroks!"
  onClick={() => setHat(hatList[0   1])} // I know this gives me just the 2nd obj of the list, but how to loop through that list on every onClick ?
/>
 

Это весь компонент:

 const IndexPage = () => {

  const [hat, setHat] = React.useState([])
  
  const hatList = ['🎩', '👒', '🎓', '🧢', '⛑', '🪖' ]

  return (
    <main>
      <header>
        <h1>For the Love of BOTW</h1>
        <h2>You thought you have found all the Koroks ?</h2>
      </header>
      <section>
        <Button
          className="btn"
          btnText="Show Me Missing Koroks!"
          onClick={() => setHat(hatList[0   1])}
        />
        <>
          <span role="img" aria-label='hat emoji various'>{hat}</span>
          <Icon name="korok" />
          <Icon name="mount" />
        </>
      </section>
    </main>
  )
}

export default IndexPage
 

Как я могу это сделать?

Вы должны использовать состояние для текущего индекса.

 const [currentIndex, setCurrentIndex] = useState(0)

// in onClickButton, increase this index
<Button
          className="btn"
          btnText="Show Me Missing Koroks!"
          onClick={() => setCurrentIndex((index) => index < hatList.length-1 ?  index 1 : 0)}
        />
        <>
 

Чтобы показать текущую шляпу:

 <>
          <span role="img" aria-label='hat emoji various'>{hatList[currentIndex] }</span>
          <Icon name="korok" />
          <Icon name="mount" />
        </>