阅读 222

hook中useState设置数据不能立即反映更改

问题:

在业务代码中使用useState时发现,当我把一个修改后当数据set进state里面后,再次打印state中那个数据是初始状态的值,并未发生改变

const [list, setList] = useState([]); // 下面在某个方法里面调用 console.log(list); // [] setList([1,2,3]); console.log(list); // [] 123456 复制代码

原因:

类似于通过扩展React.Component或创建的class组件中的setState
React.PureComponent使用useState钩子更新状态也是异步的。

同样,这里的问题不仅是异步的性质,而且函数更新状态的当前闭包和状态更新使用状态值这一事实将放映在下一次重新渲染中,现有的闭包不会收到影响,而是会创建新的闭包。  

现在,在当前状态下,挂钩中的值是由现有的闭包获得的,并且在重新渲染时,将根据是否再次创建函数来更新闭包。

即使添加了一个setTimeout函数,尽管超时将在重新渲染的一段时间后运行,但setTimeout仍将使用其先去关闭而不是更新后的值。

如果要对状态更新执行操作,则需要使用useEffect钩子,就像componentDidUpdate在类组件中使用一样,因为useState返回的setter没有回调模式

useEffect(() => {     //action on update of list }, [list]); 123 复制代码

就更新状态的语法而言,setList(result)将状态中的先前list值替换为异步请求中可用的值
但是,如果要将响应与以前存在的值合并,则必须使用状态更新的回调语法以及正确使用的扩展语法,例如

setList(prevList => ([...prevList, ...result]));


作者:草垛垛吖
链接:https://juejin.cn/post/7024319424156925965


文章分类
后端
版权声明:本站是系统测试站点,无实际运营。本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 XXXXXXo@163.com 举报,一经查实,本站将立刻删除。
相关推荐