反应状态没有得到更新

Question

在这里我需要在控制台中获取更新的输入状态，但我得到一个错误 setSavedinput is not defined 每当在输入中给出一些东西时。

import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";
const blankinput = () => {
  const [savedContent, setsavedContent] = useState("");
};
const onChangeHandler = (e) => {
  setsavedContent(e.target.value);
  console.log(savedContent);
};
export default function App() {
  return (
    <div className="App">
      <input type="Text" onChange={onChangeHandler}></input>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 1

钩子（比如useState）和修改它们的相关函数（比如你的onChangeHandler）需要进入函数组件内部，而不是外部。以下应该有效：

import "./styles.css";
import React, { useState } from "react";
import ReactDOM from "react-dom";

export default function App() {
  const [savedContent, setsavedContent] = useState("");
  const onChangeHandler = (e) => {
    setsavedContent(e.target.value);
    console.log(e.target.value); // savedContent doesn't change immediately
  };
  return (
    <div className="App">
      <input type="Text" onChange={onChangeHandler}></input>
    </div>
  );
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>

Answer 2

因为 state 只有在组件重新渲染时才有新值。所以你应该将console.log移动到useEffect，以便在组件重新渲染时检查新值。

const onChangeHandler = (e) => {
  setsavedContent(e.target.value);
};

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

Answer 3

您的代码存在一些问题，仅在组件主体中使用 hooks

另外，如果您想查看状态的最新更新，请将其放在返回函数之前。

由于Reactjs's batching mechanism，您将看不到您所在州的最新更新。并且状态更新是异步的。

这是一个 sn-p，对您的代码进行了一些更正。

function App() {
  const [savedContent, setsavedContent] = React.useState('');
  const onChangeHandler = (e) => {
    setsavedContent(e.target.value);
  };
  console.log(savedContent);
  return (
    <div className="App">
      <input type="Text" onChange={onChangeHandler} />
    </div>
  );
}

 const rootElement = document.getElementById("root");
    ReactDOM.render(<App />, rootElement);

    <script src="https://cdnjs.cloudflare.com/ajax/libs/react/17.0.2/umd/react.production.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/17.0.2/umd/react-dom.production.min.js"></script>
    <div id="root"></div>

Answer 4

您的状态是在函数blankInput 中定义的。由于 JavaScript 中的范围限定代码无法访问，请将其移到该函数之外以避免错误。

但是，为了让输入元素正确呈现，将输入的值设置为 savedContent 状态很重要。

<input type="Text" onChange={onChangeHandler} value={savedContent} />

这样你不会直接更新输入元素，而是更新触发 React 重新渲染的状态。