如何解决控制台日志即使在JS中的.then方法中对其进行更新后仍会显示旧值
我是React和JS的新手。因此,情况如下。我有一个功能组件,如下所示。
use strict;
use warnings;
use Devel::PL_origargv;
my @PL_origargv = Devel::PL_origargv->get;
print Dumper({args => \@PL_origargv});
以上所有console.log都记录“ INITIAL_VALUE”,尽管它们都在更新状态变量后被调用!我期望它是“ UPDATED_VALUE”,因为它是在HTML dom中呈现的!为什么我仍能获得旧的价值?
应该记录更新的值,因为它是在.then()方法中的promise之后执行的?据我所知,一旦解决了诺言,就会执行.then()方法。但这看起来很奇怪!纠正我,如果错了!
解决方法
如果要在myState
中使用useEffect
,则需要将其添加到依赖项数组中。
此:
useEffect(()=>{
console.log(myState)
},[myState])
应该向您显示正确的结果。
但是请记住要在单独的useEffect
调用中进行操作:如果您在依赖项数组中具有updateState
的同一useEffect
块中调用myState
,则陷入无限循环之中。
文档中的更多信息:
If you pass an empty array ([]),the props and state inside the effect will always have their initial values.
(来自https://reactjs.org/docs/hooks-effect.html#tip-optimizing-performance-by-skipping-effects)
, updateState()
解析后,myState
变量将更新。
但是它的新值只会在下一次渲染时显示/记录。
首先,您不需要使用异步功能仅用于更改状态。
const testComponent = () =>{
const [myState,setMyState] = useState('INITIAL_VALUE')
const updateState = useCallback((value) => {
setMyState(value);
console.log('updated using hook')
console.log(myState)
},[]);
useEffect(() => {
updateState("UPDATED_VALUE");
},[])
console.log(myState); *// would show always the most actual data stored in your **myState** after useEffect finished*
return(
<div>
<h1>
{myState}
</h1>
</div>
)
}
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。