添加链接
link之家
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

目标是修改this.state.citys为初始化城市,但是发现并没有初始化成功!

this.setState({
   citys: [...initCityList]                                 
});
console.log(this.state.citys);

日志打印的还是未初始化的数据

this.setState()是异步方法,也就是说,setState还没有执行完成,日志打印方法已经触发了,导致以为没有正确初始化。
需要在回调中调用打印日志方法。

在回调里调用打印日志就正常了。

this.setState({
      citys: [...initCityList]
},()=>{
    console.log(this.state.citys);
});

https://stackoverflow.com/questions/41446560/react-setstate-not-updating-state

出错代码目标是修改this.state.citys为初始化城市,但是发现并没有初始化成功!this.setState({ citys: [...initCityList] });console.log(this.state.citys);日志打印的还是未初始化的数据原因分析this.setState()是异步方法,也就是说,setState还没有执行完成,日志打印方法已经触发了,导致以为没有正确初始化。需要在回调中调用打
setState可以说是React中使用频率最高的一个函数了,我们都知道,React是通过管理状态来实现对组件的管理的,当this.setState()被调用的时候,React会重新调用render方法来重新渲染UI 但实际使用的时候,我们会发现,有时候我们setState之后,并没有立刻生效,例如我们看一下以下的示例代码 class Test extends Compo...
这里的this.setState({})不起作用,其实是因为他是异步的,立马console.log的时候,就取不出值了 使用:this.setState({goodsImg: ''}, function () { console.log(this.state.goodsImg); });就可以在异步完成的时候,打印
state与状态机思维 React将每一种UI的状态都看做为一个简单的状态机,那么任意一个UI场景就是状态机中的一种状态。(//TODO: 对于某些状态来说,状态的转化时危险的情况呢?) 根据决定状态的状态机变量的值,React框架渲染出状态机的当前状态——对于开发者来说,单个UI场景就被渲染出来了。随着状态机变量值的变化,UI状态机也在不停的改变状态,UI场景也随着不断渲染。这样一个过程可以很轻松的做到数据与UI保持一致。 在RN的开发中,开发者需要将状态机变量视为“不可变的常量”,在开发者的代码中,永远
React之this.setState使用需知注意点 -this.setState无法正确改变state值 最近在项目中,出现了一些用setState()无法给state中的变量正确赋值的情况,特此总结一下this.setState使用的注意点。 那为什么用this.setState()会出现一些跟我们常规逻辑不相符的地方呢? 请看下表(两个特性即为两个需要注意的点): (思路: 因为它这样的特...
useState是React Hooks中的一种状态管理方式,而this.setState是传统class组件中的状态管理方式。它们的区别如下: 1. 语法不同:useState使用函数式编程的方式,使用数组解构来获取状态和修改状态的方法;this.setState使用面向对象的方式,通过调用方法来修改状态。 2. useState只能在函数组件中使用,而this.setState只能在class组件中使用。 3. useState是同步的,而this.setState是异步的。在useState修改状态后,立即生效,而在this.setState修改状态后,需要等待React的更新机制异步更新组件状态后才会生效。 4. useState可以使用多个状态,而this.setState只能修改一个状态。 5. useState的性能更好,因为它不会像this.setState一样引起额外的组件更新。 6. useState可以使用函数式更新状态,而this.setState只能使用对象式更新状态。 7. useState的优点在于它简单易用,而且不需要理解React的生命周期;而this.setState的优点在于它可以在任意地方修改状态,以及可以使用生命周期钩子函数来优化性能。 综上所述,useState适用于简单的状态管理和函数组件,而this.setState适用于复杂的状态管理和class组件。