onClick function 内的计数器

Question

I have a button that adds a new div (onClick). I want to add +1 to cargoNumberCounter so that it shows that it's a new div.

  const [addReference, setAddReference] = useState([])
  const [cargoNumberCounter, setCargoNumberCounter] = useState(1)

  const createNewRef = () => {
    setCargoNumberCounter(cargoNumberCounter + 1)

    const newRef = (
      <div>
          <Heading>
             Cargo # {cargoNumberCounter}
            // {cargoNumberCounter.map((num, i) => (
            //  <p key={i}>Cargo # {num}</p>
            // ))}
          </Heading>
          <Button onClick={createNewRef}>
             Add more cargo
          </Button>
      </div>
    )

    setAddReference((ref) => [...ref, newRef])
  }

I thought I could make it work like I have shown in the example, or by spreading the state like so setCargoNumberCounter([...cargoNumberCounter, cargoNumberCounter +1]) , but for some reason it doesn't work.

Any thoughts on how to add +1 to each new div?

Answer 1

It sounds like you may be better off with one button to add new items of cargo to the list. Here's a quick example.

 const { useState } = React; function Example() { // Simple counter in state. You may prefer this to be // an array, or an object that you can add item objects to const [counter, setCounter] = useState(0); // Returns an array of divs based on the counter value function getDivs() { const divs = []; for (let i = 0; i < counter; i++) { divs.push(<div>{i + 1}</div>); } return divs; } // Updates the counter function handleClick() { setCounter(counter + 1); } return ( <div> <div className="divs"> {getDivs()} </div> <div className="counter">Div count: {counter}</div> <button type="button" onClick={handleClick}> Add new div </button> </div> ); } ReactDOM.render( <Example />, document.getElementById('react') );

 .divs { border: 1px solid #676767; padding-left: 0.3em; }.divs, .counter { margin-bottom: 1em; }

 <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script> <div id="react"></div>