Question

我不确定为什么，但是由于某种原因，在这个简单的演示中，您必须提交两次表单才能更改testState的值。应该发生的是，无论何时（第一次）提交表单，testState都应将其值更改为"changed"，但它似乎仅在第二，第三（等等）提交时发生。 / p>

有人可以在这里发现明显的东西吗？这是代码：

import React, { useState } from "react";

const App = () => {
  const [testState, setTestState] = useState("unset");
  const [inputValue, setInputValue] = React.useState("");
  const submitMe = e => {
    e.preventDefault();
    setTestState("changed");
    console.log("name change Fn", inputValue, 'testState', testState); // should log 'changed' after first submit
  };

  const onNameChange = e => {
    console.log(e)
  }

  return (
    <>
      <form onSubmit={submitMe}>
        <input
          placeholder="the value"
          type="text"
          onChange={e => onNameChange(e.target.value)}
        />
        <button type="submit">Submit</button>
      </form>
    </>
  );
};

export default App;

还有一个堆栈闪电演示：https://stackblitz.com/edit/react-joe6jg

该值应使用表单提交记录到控制台。

谢谢。

Answer 1

设置状态后不能立即获得更新状态。您需要通过useEffect来获取它。

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

Answer 2

useState的set方法在某种程度上是异步的。因此，只有在当前作用域代码完成后，您的变量才会触发组件中的更改，然后您才能对其进行记录。您可以尝试通过将console.log放入组件（而不是useEffect）来查看组件的变化。

但是您也可以在useEffect内看到它，这样就不会在每次重新渲染时都触发日志记录：

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

Answer 3

根据docs中的解释：

setState（）不会立即使this.state突变，而是创建一个等待状态转换。调用此后访问this.state 方法可能会返回现有值。

不能保证对setState的调用的同步操作并且可以批量调用以提高性能。

您应该在useEffect内监视状态更改。

setup.py

简单反应状态不会在第一次请求时改变

3 个答案: