onClick function 內的計數器

Question

我有一個添加新 div 的按鈕（onClick）。 我想為 cargoNumberCounter 添加 +1 以顯示它是一個新的 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])
  }

我想我可以讓它像我在示例中顯示的那樣工作，或者通過像setCargoNumberCounter([...cargoNumberCounter, cargoNumberCounter +1])那樣傳播 state ，但由於某種原因它不起作用。

關於如何為每個新 div 添加 +1 的任何想法？

Answer 1

聽起來您最好用一個按鈕將新的貨物添加到列表中。 這是一個簡單的例子。

 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>