如何使用反应挂钩在按钮单击时设置组件的当前 state

Question

I want to run some logic when a button is clicked and I want to change the state in that logic. So far react is giving me a to many rerenders error. Here is my code so far

const [current, setCurrent] = useState(0)
  // const [theRest, theRest] = useState(false);

  const next = (order, i) => {
    let nextSlide = order + 1
    setCurrent(nextSlide)

    if (nextSlide > i) {
      nextSlide = 0
    }
  }

{data.allSanitySlideDeck.edges.map(({ node: slide }, i) => (
        <React.Fragment key={i}>
          {/* {current === slide.order && ( */}
          <>
            <Card>
              <h1>{slide.postTitle}</h1>
              <h2></h2>
              <p></p>
            </Card>
            <button>back</button>
            <button onClick={next(slide.order, i)}>next</button>
          </>
          // )}
        </React.Fragment>
      ))}

Answer 1

onClick expects a function inside the {} not the result of calling a function

Try changing to:

onClick={() => next(slide.order, i)}

What is basically happening is that function call is being made every time render() occurs and causes a state update which causes a new render call and therefore a race condition