React函数式组件点击X按钮后map方法渲染空行问题求助

问题原因 #

你写的X按钮放在<form>标签内部，HTML中button标签如果没有显式指定type属性，默认值是submit，所以你点击X按钮的时候，除了执行你写的handlerRemove逻辑，还会触发form的提交事件handlerOnSubmit，这个提交函数会把当前已经清空的heldItems追加到salesItemsTemp数组里，自然就会多出一个空数据的渲染行。

解决方法 #

任选一种即可：

• 给X按钮显式指定type="button"，就不会默认触发表单提交了：

<button type="button" onClick={handlerRemove}>X</button>

• 在handlerRemove函数里阻止事件默认行为，避免触发表单提交：

const handlerRemove = (e) => {
    e.preventDefault();
    console.log('its from handlerRemove !');
};

内容的提问来源于stack exchange，提问作者sLurPPPP