элемент не добавляется в массив с помощью функции .push ()

Question

Я использую реагирование и пытаюсь добавить новый номер в массив внутри моего функционального компонента, но только возвращает новый номер и удаляет предыдущие?

import React, { useState } from 'react';
import DashboardHeader from '../dashboardHeader/dashboardHeader'
import { Link } from 'react-router-dom'

function EmptyInvoice() {
    // setting local state 
    const [uniqueID, setuniqueID] = useState(1)
    let invoiceRows = [0]
    // function to ensure that every row is a unique number
    function customNumberGenerator(){
        setuniqueID(uniqueID + 1)
        invoiceRows.push(uniqueID)
    }
    // array of amout of items on an invoice
    const invoiceItems = [{number: 1}]
    console.log(invoiceRows)
    return(
        <div className='float-right' onClick={() => {customNumberGenerator()}}>
            add item
        </div>
    )
}

Answer 1

Вы создаете новый массив каждый раз, когда выполняется ваша функция рендеринга. Вы должны использовать useState для invoiceRows тоже так:

const [ uniqueID, setuniqueID ] = useState(1);
const [ invoiceRows, setInvoicesRows ] = useState([0]);

// function to ensure that every row is a unique number
function customNumberGenerator() {
    setuniqueID(uniqueID + 1);
    setInvoicesRows([...invoiceRows, uniqueID])
}

// array of amout of items on an invoice
const invoiceItems = [ { number: 1 } ];
console.log(invoiceRows);