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

Question

每当我单击添加按钮时，我都会遇到问题，它应该生成新字段并更新状态。但是，一旦我按下“添加”按钮，它就会设置新状态并添加该字段，但随后它将再次呈现并自动返回到初始状态。我做错了。

请参阅下面的代码链接

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

Answer 1

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

因为您的按钮提交表格。添加e.preventDefault（）来阻止它