javascript - 将数据推送到数组后更新 Sate 时，React 功能组件未呈现

Question

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

问题

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

我没有编写代码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'>
            •&lt;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: '' },
  ]);
};