更新变量并立即使用它
更新变量并立即使用它
提问于 2022-03-14 14:08:24
我试图在api调用之后更新一个变量，但是对于这个问题，我将使用一个单击事件。
如您所见，我打印的变量在第一次单击时使用旧状态，因为它还没有注册更改。在下面的调用中，变量将与新文本一起打印。
是否有一种方法可以立即在changeText函数中使用更新的变量？
https://stackblitz.com/edit/react-36jqi3
export default function App() {
const [text, setText] = useState('inital text');
const changeText = () => {
setText('new text');
console.log(text);
};
return (
<div>
<button onClick={changeText}>Update variable</button>
</div>
);
}回答 2
Stack Overflow用户
发布于 2022-03-14 14:13:08
不是的。
当前正在运行的changeText函数将关闭在创建changeText函数的呈现过程中分配的值中的text值。
组件的下一个呈现将生成一个新的changeText函数，并将其分配给onClick。
如果您想使用刚才传递给setState的值，那么将该值的副本保存在其他地方。
const changeText = () => {
const newValue = 'new text';
setText(newValue);
console.log(newValue);
};或者，在效果钩子中执行需要新值的工作，当该值发生变化时会触发该值。
useEffect(() => {
console.log(text);
}, [text]);
const changeText = () => {
setText('new text');
};这也会在初始呈现时触发钩子，因此您可能需要添加一个额外的测试，以确保在记录它之前它不是初始值。
Stack Overflow用户
发布于 2022-03-14 15:21:34
可以从路上走。
export default function App() {
const [text, setText] = useState('inital text');
const changeText = () => {
/* Calling updater to get the latest value. */
setText('new text');
setText((state) => {
console.log("immediately updated text -->", state);
return state;
});
};
return (
<div>
<button onClick={changeText}>Update variable</button>
</div>
);
}页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持
原文链接：
https://stackoverflow.com/questions/71474773
复制相关文章
相似问题
getInitialProps在Next.js中是什么
getInitialProps在Next.js中的条件执行
getInitialProps在Next.js与TypeScript中的应用
在Next.js中重定向getInitialProps时出现无限循环
next.js - getInitialProps在组件中不起作用
添加站长 进交流群
领取专属 10元无门槛券
AI混元助手 在线答疑
关注 腾讯云开发者公众号
洞察 腾讯核心技术
剖析业界实践案例
腾讯云开发者
