javascript - 从数组中删除项目时，数据未反射(reflect)在 UI 上

Question

// Delete Input Fields:-
const [salesProduct, setSalesProduct] = useState(props.inputValue);

const deleteInput = (id, indexValue) => {
 salesProduct.splice(indexValue, 1); // salesProduct is an array when delete 
 let data = salesProduct;
 // when console the data it is giving write out put but data is not reflecting 
 console.log(data);  
 setSalesProduct(data);
}

//下面是我的 Jsx，我正在使用 deleteInput 事件来删除项目，任何人都可以帮助我，我做错了什么
salesProduct.map((值，索引) => {

return (
<tr key={value.id}>    
<td scope="row">
<input id={value.id} value={value.shippingValue}  onChange={ (e) => handleInputAndDropdown(e, value.id, 'cartValue') } className={value.className} type={value.type} name={value.name} title={value.title} placeholder={value.placeholder} />
</td>    
<td>
 <input id={value.id} value={value.taxValue}  onChange={ (e) => handleInputAndDropdown(e, value.id, 'taxValue')}  className={value.className} type={value.type} name={value.name} title={value.title} placeholder={value.placeholder}/>
</td>    
<td>
{showDeleteBtn && <a href="#" onClick={() => deleteInput(value.id, index)}>Delete</a>}
</td>

</tr>
)
})

Answer 1

我会做的是完全不同的，而不是拼接，我会使用过滤方法

// Delete Input Fields:-
const [salesProduct, setSalesProduct] = useState(props.inputValue);

const deleteInput = (id) => {
  const newSales = salesProduct.filter(sale => sale.id != id); 
  setSalesProduct(newSales);
}

它将帮助您返回一个新数组，而不是删除您想要的数组并将值返回给您的拼接