为什么 React 在 setState 之后丢弃我的更改？ [复制]答案

【问题标题】：Why is React discarding my changes after setState? [duplicate]为什么 React 在 setState 之后丢弃我的更改？ [复制]
【发布时间】：2021-05-03 23:54:51
【问题描述】：

我正在尝试设置我的 React 组件的状态，但在调用 setState 方法后屏幕刷新并且值恢复为默认值。怎么回事？

代码如下：

import React, { useEffect, useState } from "react";
import "./styles.css";

export default function App() {
  const friends = [
    { name: "A", age: 5 },
    { name: "B", age: 10 },
    { name: "C", age: 20 }
  ];
  friends.push({ name: "D", age: 30 });
  const [state, setState] = useState({ ...friends[0] });

  useEffect(() => {
    console.log(state)
  }, [state]);

  function changeState(e) {
    if (e.key === "Enter") {
      const num = e.target.value;
      setState({ ...friends[num] });
    }
  }
  return (
    <div className="App">
      <form>
        <h1>Hello</h1>
        <input type="text" onKeyPress={changeState} />
      </form>
      <div>
        <b>{state.name}</b>
      </div>
      <div>
        <b>{state.age}</b>
      </div>
    </div>
  );
}

这里是沙盒的链接：

https://codesandbox.io/s/jovial-meadow-khw5p?file=/src/App.js:0-772

【问题讨论】：

这个问题不是提交表单，我是问为什么状态改变没有生效。这个问题有什么问题？
因为您正在提交表单。
因为在你按下Enter之后，form被提交了。它的默认行为是刷新页面。而通过刷新页面，你内存中的所有数据都消失了。您的应用程序再次重新启动，状态返回到默认状态。您应该preventDefault 以防止页面刷新。
我明白了……这真是太好了！
@LoiNguyenHuynh 好的！谢谢

标签： reactjs

【解决方案1】：

在代码中，当按下“Enter”键时，changeState 函数被调用。浏览器的默认提交表单操作是刷新页面，因此您的代码会重新启动。为了防止这种情况，你可以调用 submitHandler 函数如下：

    function submitHandler(e) {
        e.preventDefault();
    }

在上面的代码中，e.preventDefault() 阻止默认浏览器操作（刷新页面）。

如果在表单的“onSubmit”属性中调用submitHandler函数，将阻止刷新页面。

return (
        <div className="App">
            <form onSubmit={submitHandler}>
                <h1>Hello</h1>
                <input type="text" onKeyPress={changeState} />
            </form>
            <div>
                <b>{state.name}</b>
            </div>
            <div>
                <b>{state.age}</b>
            </div>
        </div>
    );

更多信息，您可以查看此页面： MDN - Event.preventDefault()

【讨论】：