设置状态后页面重新加载,而不是新状态,它返回到初始状态

Page reloads after setting state and instead of new state it goes back to initial state

每当我点击添加按钮时我都会遇到一个问题,它应该生成新的字段并更新状态。但是只要我点击添加按钮,它就会设置新状态并添加字段,但随后它会再次呈现并自动返回到初始状态。我做错了什么。

参考下方代码link

https://codesandbox.io/s/react-hooks-usestate-1h8cw?file=/src/index.js

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

因为您的按钮提交表单。添加 e.preventDefault() 以防止它