Реактивный функциональный компонент не рендерит при обновлении Sate после помещения данных в массив

Question

Я пытаюсь создать динамическую c форму ввода, где пользователь может добавлять новые входы.

Проблема

Компонент не отображается при State обновляется, но когда я открываю Model, который существует в том же компоненте, который использует State, чтобы открыть / закрыть его, все выдвинутые элементы в массиве отображаются одновременно.

Я не сделал введите код Modal, чтобы его было легче прочитать

Мой код

   const [supply_detail_list,setSupply_detail_list] = React.useState([
        {supplyDetail:'',supplyDetailAmount:''}
    ]);
    const addNewSuppDetailInput = () => {
        supply_detail_list.push({supplyDetail:'',supplyDetailAmount:''});
        setSupply_detail_list(supply_detail_list) 
    }

JSX

<div onClick={addNewSuppDetailInput}>+</div>
    {
        supply_detail_list.map((val,index) => {
            console.log('rendered')
            const detalTextID = 'supply_detail_text' + index;
            const detalValtID = 'supply_detail_val'+ index;
            return (
            <div className='supply-details'>
            •<input type='text' name={detalTextID} onChange={supply_detail_handler}/> <input className ='detail-value' onChange={supply_detail_handler} name={detalValtID} type='number'/>
            </div>
            );

        }) 
    }
    </div>

Answer 1

реагирует на то, что вы хотите вернуть новый массив, если вы хотите обновить его, а не изменять его. Попробуйте что-то вроде этого:

const addNewSuppDetailInput = () => {
  setSupply_detail_list([
    ...supply_detail_list,
    { supplyDetail: '', supplyDetailAmount: '' },
  ]);
};