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

Question

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

参考下面的代码链接

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

标签： reactjsreact-state-managementreact-state

Answer 1

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

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