反应状态没有得到更新

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

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

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

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

Answer 2

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

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

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

这是对您的代码进行了一些更正的片段。

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 3

您的状态是在函数 blankInput 中定义的。由于 JavaScript 中的作用域无法访问该代码，请将其移出该函数以避免错误。

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

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

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

Answer 4

钩子（如 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>

反应状态没有得到更新

React state is not getting Updated

javascript

state

jsx

reactjs

react-redux

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

反应状态没有得到更新

React state is not getting Updated

javascript

state

jsx

reactjs

react-redux

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

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