【学习react】react的setState函数的小bug的问题

最新推荐文章于 2022-08-20 20:57:53 发布

weixin_34223655

最新推荐文章于 2022-08-20 20:57:53 发布

阅读量185

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://segmentfault.com/a/1190000014152406

本文探讨了React中setState函数的异步特性及其回调机制。作者通过实例对比了不同实现方式的效果，包括直接回调和使用async/await。揭示了React状态更新的内部机制。

都知道react的setState函数是个异步函数，要执行相关操作需要使用回调的方式。
但是作为初学者，在写的过程中遇到了一个问题。

这是父组件，注意Form这个组件

父组件

以下是Form组件的截图
子组件

子组件Form里面的Input的Onchange事件触发，就setState,然后回调执行由父组件传进来的Props.onChange,同时将子组件的state作为参数。父组件打印这个参数。

重点是子组件这个changeName函数：

图片描述

讲道理，这样写应该没有问题。

但是，实际在执行的时候，打印出来却是onchange变化之前的state。

图片描述

然后，我想打印一下,看究竟是setState成功没有。就改了一下

图片描述

然后发现，这样写是可行的。然后我就糊涂了，为什么这样写可行，上边那种方式不可行呢？

我也不知道。
然后async/await的写法，也是可行的；

图片描述

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

weixin_34223655

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

ReactNative学习笔记

weixin_68658847的博客

10-04

1409

ReactNative学习笔记

react的setState使用中遇到的问题

weixin_33779515的博客

06-20

878

setState()更新的数据和自己预期的不一致对 React 新手来说，使用 setState 是一件很复杂的事情。即使是熟练的 React 开发，也很有可能因为 React 的一些机制而产生一些bug，react文档中也说明了当使用 setState 的时候，需要注意什么问题：绝对不要直接改变 this.state ，因为之后调用 setState() 可能会替换掉你做的改变。把 t...

参与评论您还未登录，请先登录后发表或查看评论

1.8react 留言板 value数据需要用 onchange+setstate

weixin_45271385的博客

11-12

357

import React from 'react' import ReactDom from 'react-dom' class App extends React.Component { state = { iptname: "", ipttxt: "", list: [ { id: 1, name: '泡泡', ...

闲来聊聊React中的setState

Jackhzh2014的博客

07-22

297

前段时间拿到了vivo的前端sp，遗憾的是没拿到ssp，但是vivo的技术大佬给我留下了很深的印象，也让我受益匪浅。技术面时和大佬聊了一个小时，聊的过程中其实大概也知道了最后的结果；大佬也点出了我的不足，同时他强烈建议和鼓励我去做博客分享，这才有了我这次的第一篇文章。知道了自己的不足以后，最近两个月在疯狂看框架源码，包括React和Vue（主要看React），去学习一下里面的一些奇妙设计...

react中的setState详解

white-hang的博客

12-27

5910

本文主要介绍了react中的setState

在react中受控组件input里面onChange传值的问题

gaojing1023的博客

06-06

7191

在react中，调用事件，如果该事件不是用箭头函数定义的，那就要手动给该事件绑定this，这里不解释原理(this指向问题) 如下一个正常的受控组件input 构造器里面定义的state如下 this.state = { value: ‘’ } 在render中有一个input 通过箭头函数, 2. _handleChange = (event) => { 3. this.setState(() => ({ 4. value: event.target.value 5. }))

十八、react拓展 - setState - 路由组件懒加载 - Hooks - Fragment - Context - PureComponent - 插槽 - 错误边界 - 组件通信方式总结

快乐de馒头

08-20

439

对象式的setState是函数式的setState的简写方式【语法糖】使用原则如果新状态不依赖于原状态【使用对象方式】如果新状态依赖于原状态【使用函数方式】如果需要在setState()执行后，获取最新的状态数据，可以在第二个callback函数中读取到异步更新的最新值父子组件兄弟组件（非嵌套组件）祖孙组件（跨级组件）

React Component生命周期函数

RainGirl_的博客

06-27

385

React组件有哪些生命周期函数？类组件才有的生命周期函数：

React函数式组件Hooks开发

hhhh

07-11

1938

组件预编译会带来巨大的潜力使用 class 组件会无意中鼓励开发者使用一些让优化措施无效的方案，而且class 也给目前的工具带来了一些问题。e.g：class 不能很好的压缩，并且会使热重载出现不稳定的情况。因此，推荐函数式函数式组件没有实例的概念，函数通过执行去渲染 //函数组件1.0 const Example = (props) => { // 你可以在这使用 Hook return <div />; } //函数组件2.0 function MyFunctional

React 18 中StrictMode多次调用函数式组件体及其hook

老司机的后备箱

06-09

1292

如上文所述，直接脚手架搭建项目，其中场景会用到异步请求一些数据，然后通过函数式组件响应到页面，在试图找到问题所在的前提下，进行简化，先用同步代码测试，已经发现会重复调用函数体。但是在以及之前的版本就不会出现这种情况，所以我以为是bug，找了好久，因为是两天前才更新的18.1.0，网上也没讲这个的帖子，就去提了issue。地址：https://github.com/facebook/react/issues/24467 （随后被告知是新特性，已被关闭）再现步骤：再现测试代码 Link to code exa

react中的setState方法

Sapling

01-22

4872

在react中如果你想修改数据的话，必须使用this.setState()方法可以在调用一个事件中使用this.setState()方法，从而达到修改数据的目的, 也可以用于文本框双向数据绑定例如 render(){ //创建一个点击事件 return&amp;amp;lt;button onClick={()=&amp;amp;gt;textCount()}&amp;amp;gt;&amp;amp;lt;/button&a

React 关于setState同步或异步问题的理解

火星基地

11-09

4224

1. setState同步？异步？在 React 的类式组件中，我们可以使用setState方法更新state状态。但有些时候使用setState之后，得不到最新的数据。其实 React 中setState本身执行的过程和代码是同步的，只是因为 React 框架本身的性能优化机制而导致的。React 中合成事件和生命周期函数的调用顺序在更新之前，导致在合成事件和生命周期函数中无法立刻得到更新后的值，形成了异步的形式。假如在一个合成事件中，循环调用了setState方法n次，如果 React 没有优化，

React中的state，事件及SetSate

weixin_34082177的博客

12-24

332

state的创建方法类组件才是有状态的组件，如果是Arrow Function创建的组件，也叫做无状态组件（stateless compoment） 1.react里的第一种state定义 export default class App extends Component { state = { name: 'tianlanlan', age: 18， ...

React this.setState 详解

热门推荐

卓原的进化之旅

07-02

1万+

setState(arg1,arg2) 括号内的arg1可传入两种参数，一种是对象，一种是函数. arg2为更改state之后的回调方法,arg2可为空. 对象式的setState用法例如： //第一种 this.setState({ isAuthenticated: true}); this.setState({ isAuthenticated: true},()=>{})...

react setState(updater, [callback]) 改变state对象的值(setTimeout定时器)

黄彪博客

07-15

1万+

文章参考 react 修改state为对象中的某一个属性值 var NoLink = React.createClass({ getInitialState:function(){ return {message:''} }, handelChange:function(event){ console.log(event.target);...

【react】react中setState的用法

qq_40436793的博客

10-07

1433

setState的用法在react中，state是不能直接修改的，要用setState，setState的用法有以下两种：用法一：setState(updater[, callback]) updater：函数类型，这个函数将接收前一个状态作为第一个参数，应用更新时的 props 作为第二个参数，返回一个更新后的 state 中的状态对象，它会和 state 进行浅合并。 callback：可选，回调函数。用法二：setState(stateChange[, callback

关于react的理解—setState失效？

zhanglulude优快云的博客

04-20

4708

setState失效？State 的更新可能是异步的出于性能考虑，React 可能会把多个 setState() 调用合并成一个调用。因为 this.props 和 this.state 可能会异步更新，所以你不要依赖他们的值来更新下一个状态。 // Wrong 这种不对 this.setState({ counter: this.state.counter + this.props.increment, }); 用这种方法写： // Correct this.setState((state, p

react开发中setState失效的问题

An_cf的博客

08-24

5409

在react项目的开发中碰到一个奇怪的问题，setState失效。我这里提到的失效不是说的setState由于异步而造成的数据延迟问题，如果有这个问题的话，你可以通过this.forceUpdate()的方式去强制更新；言归正传，我碰到的问题是由于我的子组件使用了componentWillReceiveProps而产生的setState失效假象。查资料并实验一番，发现当调用setState时，co...

react中的setState机制引发的坑

笔记搬运工

12-04

3781

问题今天在做作业的过程中，在class一个组件内，因为一个函数中的逻辑有些复杂，于是拆成若干个函数，然后在一个函数中调用其他函数，但是运行的时候发现并不能运行出正常的结果。如以下函数， setEnterTime(time){ this.setState({ enterTime:time }); this.findMin() } 解决过程使用浏览器对变量进行排查，发现enterTi...

React setState方法深入分析与实践

标题和描述中提到了“setState”和“React”，这指向了React框架中一个非常核心的概念和函数。React是一个由Facebook开发并开源的前端JavaScript库，主要用于构建用户界面，尤其是单页面应用。它遵循组件化的开发...