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

Question

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

问题

组件在更新 State 时未呈现，但当我打开存在于使用 State 到 open/close 的同一组件中的 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 期望你在 return 一个新数组时更新它而不是改变它。尝试这样的事情：

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

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

React functional component is not rendering when updating the Sate after pushing data to array

javascript

rendering

reactjs

react-functional-component

use-state