react中useState的值没有改变，而是旧的数值-Toy模板网

这篇具有很好参考价值的文章主要介绍了react中useState的值没有改变，而是旧的数值。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

问题背景

想实现点击按钮就改变数据的效果，但是在控制台的打印结果，总是上一次的修改情况，并不是最新的修改后的数据
react usestate里的数据不是新的,react.js,javascript,前端
代码：

import { useState, useRef } from "react";

// 实现sonA的数据传递给sonB
const SonA = () => {
  const [sonAName, setAName] = useState("");
  const sonARef = useRef(null);
  const changeAName = () => {
    console.log("sonARef.current.value", sonARef.current.value);
    setAName(sonARef.current.value);
    console.log("sonAName:", sonAName);
  };
  return (
    <div>
      <input type="text" ref={sonARef} />
      <button onClick={changeAName}>changeAName</button>
    </div>
  );
};

const SonB = () => {
  return <div>SOnB</div>;
};

const App = () => {
  return (
    <div>
      <SonA> </SonA>
      <SonB></SonB>
    </div>
  );
};

export default App;

原理解释：

在 React 中，useState 是一个异步更新状态的 Hook，因此在调用 setAName 更新状态后，sonAName 并不会立即改变，而是会在下一次渲染时才会更新。

因此，在 console.log("sonAName:", sonAName); 这行代码中，你看到的仍然是更新前的 sonAName 的值。

如果你想在状态更新后立即获取最新的状态值，可以考虑使用 useEffect 来监听状态的变化，然后在回调函数中执行相应的逻辑。

你可以这样修改 SonA 组件：

import React, { useState, useRef, useEffect } from "react";

const SonA = () => {
  const [sonAName, setAName] = useState("");
  const sonARef = useRef(null);

  useEffect(() => {
    console.log("sonAName:", sonAName);
  }, [sonAName]);

  const changeAName = () => {
    console.log("sonARef.current.value", sonARef.current.value);
    setAName(sonARef.current.value);
  };

  return (
    <div>
      <input type="text" ref={sonARef} />
      <button onClick={changeAName}>changeAName</button>
    </div>
  );
};

const SonB = () => {
  return <div>SOnB</div>;
};

const App = () => {
  return (
    <div>
      <SonA />
      <SonB />
    </div>
  );
};

export default App;