将数据推送到数组后更新日期时，React 功能组件未呈现

Question

我正在尝试创建一个动态输入表单，用户可以在其中添加新输入。

问题

当State 更新时组件未呈现，但是当我打开存在于使用State 打开/关闭它的同一组件中的Model 时，数组中的所有推送元素显示在一个时间。

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

react 期望您在想要更新它而不是改变它时返回一个新数组。试试这样的：

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