Reactjs 页面在设置状态后重新加载，并返回初始状态，而不是新状态

我有一个问题，每当我点击添加按钮，它应该生成新的字段和更新状态。但只要我点击添加按钮，它就会设置新的状态并添加字段，但随后它会再次渲染并自动返回初始状态。我做错了什么

请参阅下面的代码链接

---

因为你的按钮提交表单。添加e.preventDefault（）以阻止它

将按钮的

类型

属性设置为

按钮

值。默认情况下，它具有

submit

值。它应该是

  const handleAddInput = (e) => {
    e.preventDefault()
    setContacts([...Contacts, { service: "", contact: "" }]);
    // const list = [...Contacts];
    // list.push({ service: "", contact: "" });
    // setContacts(list);
  };