精华内容
下载资源
问答
  • react中如何修改state值

    2020-09-25 10:04:56
    这种情况最简单,直接给要修改的状态赋一个新即可 //原state this.state = { count: 0, title : 'React', success:false } //改变state this.setState({ count: 1, title: 'bty', success: t

    根据State类型 更新
    当状态发生变化时,如何创建新的状态?根据状态的类型,可以分成三种情况:

    1、 状态的类型是不可变类型(数字,字符串,布尔值,null, undefined)

    这种情况最简单,直接给要修改的状态赋一个新值即可

    //原state
    this.state = {
      count: 0,
      title : 'React',
      success:false
    }
    //改变state
    this.setState({
      count: 1,
      title: 'bty',
      success: true
    })
    

    2、 状态的类型是数组
    数组是一个引用,React 执行 diff 算法时比较的是两个引用,而不是引用的对象。所以直接修改原对象,引用值不发生改变的话,React 不会重新渲染。因此,修改状态的数组或对象时,要返回一个新的数组或对象。
    (1)增加
    如有一个数组类型的状态books,当向books中增加一本书(chinese)时,使用数组的concat方法或ES6的数组扩展语法

    // 方法一:将state先赋值给另外的变量,然后使用concat创建新数组
    let books = this.state.books; 
    this.setState({
      books: books.concat(['chinese'])
    })
    
    // 方法二:使用preState、concat创建新数组
    this.setState(preState => ({
      books: preState.books.concat(['chinese'])
    }))
    
    // 方法三:ES6 spread syntax
    this.setState(preState => ({
      books: [...preState.books, 'chinese']
    }))
    

    (2)截取
    当从books中截取部分元素作为新状态时,使用数组的slice方法:

    // 方法一:将state先赋值给另外的变量,然后使用slice创建新数组
    let books = this.state.books; 
    this.setState({
      books: books.slice(1,3)
    })
    // 
    // 方法二:使用preState、slice创建新数组
    this.setState(preState => ({
      books: preState.books.slice(1,3)
    }))
    

    (3)条件过滤
    当从books中过滤部分元素后,作为新状态时,使用数组的filter方法:

    // 方法一:将state先赋值给另外的变量,然后使用filter创建新数组
    var books = this.state.books; 
    this.setState({
      books: books.filter(item => {
        return item != 'React'; 
      })
    })
    
    // 方法二:使用preState、filter创建新数组
    this.setState(preState => ({
      books: preState.books.filter(item => {
        return item != 'React'; 
      })
    }))
    

    注意:不要使用push、pop、shift、unshift、splice等方法修改数组类型的状态,因为这些方法都是在原数组的基础上修改,而concat、slice、filter会返回一个新的数组。
    3、状态的类型是普通对象(不包含字符串、数组)
    对象是一个引用,React 执行 diff 算法时比较的是两个引用,而不是引用的对象。所以直接修改原对象,引用值不发生改变的话,React 不会重新渲染。因此,修改状态的数组或对象时,要返回一个新的对象。
    使用ES6 的Object.assgin方法

    // 方法一:将state先赋值给另外的变量,然后使用Object.assign创建新对象
    var owner = this.state.owner;
    this.setState({
      owner: Object.assign({}, owner, {name: 'Jason'})
    })
    
    // 方法二:使用preState、Object.assign创建新对象
    this.setState(preState => ({
      owner: Object.assign({}, preState.owner, {name: 'Jason'})
    }))
    

    使用对象扩展语法(object spread properties)

    // 方法一:将state先赋值给另外的变量,然后使用对象扩展语法创建新对象
    var owner = this.state.owner;
    this.setState({
      owner: {...owner, name: 'Jason'}
    })
    
    // 方法二:使用preState、对象扩展语法创建新对象
    this.setState(preState => ({
      owner: {...preState.owner, name: 'Jason'}
    }))
    

    本篇文章并非原创只整理了–白小宇的
    https://blog.csdn.net/b954960630/article/details/79822639
    React学习

    展开全文
  • 1、 安装 vuex npm install vuex -S 2、在目录下创建store文件 3、 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 ...这个的功能是运用mutations 修改state中的

    1、 安装 vuex

    npm install vuex -S

    2、在目录下创建store文件

    3、 在store.js编辑一个修改state的方法

    然后在mian.js中全局引入

    最后在组件中使用

    这个的功能是运用mutations 修改state中的值

    展开全文
  • react使用prevState修改state

    千次阅读 2018-06-28 10:40:33
    react使用prevState修改stateclass Timer extends React.Component { constructor(props) { super(props); this.state = { seconds: 0 }; } tick() { this.setState(prevState => ({ seconds: pr....

    react使用prevState修state的值

    class Timer extends React.Component {

      constructor(props) {

        super(props);

        this.state = { seconds: 0 };

      }

     

      tick() {

        this.setState(prevState => ({

          seconds: prevState.seconds + 1

        }));

      }

     

      componentDidMount() {

        this.interval = setInterval(() => this.tick(), 1000);

      }

     

      componentWillUnmount() {

        clearInterval(this.interval);

      }

     

      render() {

        return (

          <div>

            Seconds: {this.state.seconds}

          </div>

        );

      }}

     

    ReactDOM.render(<Timer />, mountNode);

    展开全文
  • 在vue中使用vuex,修改state

    万次阅读 2019-02-25 16:26:03
    1、 安装 vuex npm install vuex -S 2、在目录下创建store文件 3、 在store.js编辑一个修改state的方法 然后在mian.js中全局引入 最后在组件中使用 ...这个的功能是运用mutations 修改state中的 ...

    1、 安装 vuex

     npm install vuex -S
    

    2、在目录下创建store文件

    在这里插入图片描述

    3、 在store.js编辑一个修改state的方法

    在这里插入图片描述

    然后在mian.js中全局引入
    

    在这里插入图片描述

    最后在组件中使用

    在这里插入图片描述

    这个的功能是运用mutations  修改state中的值
    
    展开全文
  • vuex之不能在外部修改state

    千次阅读 2019-04-23 11:13:45
    我们使用vuex时可能不小心在外部修改state提出红色警告 解决方案:如果是数组类型JSON.parse(JSON.stringify())使用深拷贝不去影响state的即可
  • setState修改state里面对象属性的

    千次阅读 2018-12-29 09:54:41
    修改state里面对象属性的用Object.assign() Object.assign()方法用于将所有可枚举属性的从一个或多个源对象复制到目标对象,返回目标对象。 updateState=(value,keyName)=&amp;amp;amp;amp;amp;amp;amp;...
  • 1.父组件修改传值 if (res.code === 10000) { this.setState({ OPT_ROLE_CODE: res.data.rows[0].role }) }   <OperatorsInfoTab OPT_ROLE_CODE={this.state.OPT...
  • 针对state为对象,想要修改对象中某一个而不修改其他,请欣赏接下来的方法 1.设置state对象 state={ datavalue:{ slid:'', name:'', memo:'', version:'', icon:defaultimg, loginlink:'', key:'', ...
  • 使用vuex修改state时,有两种方式: 1)可以直接使用 this.$store.state.变量 = xxx; 2)this.$store.dispatch(actionType, payload)   或者: this.$store.commit(commitType, payload)     二. 异同点 ...
  • export default class BindEvent extends React.Component{ constructor(){ super() //私有数据 this.state = { msg:'嘿嘿', name : 'zs', age : 22, gender : '男' } } render(){
  • 使用vuex修改state时,有两种方式: 1)可以直接使用 this.$store.state.变量 = xxx; 2)this.$store.dispatch(actionType, payload) 或者: this.$store.commit(commitType, payload) 二. 异同点 1)共同...
  • 1)共同点: 能够修改state里的变量,并且是响应式的 2)不同点:       若将vue创建 store 的时候传入 strict: true, 开启严格模式,那么任何修改state的操作,只要不经过 mutation的函数都会报错 ...
  • react 组件点击修改值 state

    千次阅读 2018-10-24 15:31:06
    点击时改变标签上的,但是在方法里是取不到this,那么首先要做的就是改变this  class Leo extends React.Component{ render(){ return (&lt;div&gt; &lt;input type="button" value=&...
  • Vuex修改state内的数据

    千次阅读 2021-01-06 16:20:36
    将需要存储的数据写在state.js文件内: export default { ... *testData是state内需要被修改的数据 *data是传来的数据 */ state.testData = data } } 在进行修改该数据的函数中: /** *..
  • 使用 vuex 修改 state 时,有两种方式: 可以直接使用 this.$store.state.变量 = xxx; this.$store.dispatch(actionType, ...能够修改state里的变量,并且是响应式的(能触发视图更新) 不同点: 若将 vue 创建...
  • 主要介绍了VUEX-action可以修改state吗,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
  • 短时间内多次执行重复修改 后调用的 setState() 将覆盖同一周期内先调用 setState 的 this.state ={ count:0 } --------------------------------------------------- this.setState({ count:this.state.count+...
  • 先展示下点击改变前state点击改变后state的变化首先创建者两个文件routes目录下的DvaState.jsimport React from 'react'; import { connect } from 'dva'; import { Link } from 'dva/router'; let count =...
  • 在react中正确修改state

    万次阅读 2018-07-01 19:17:54
    一,在react中可以通过this.state.{属性}的方式直接获取state,但是当我们修改state的时候,往往有许多的坑需要注意。以下 为三种常见的陷阱:1,不能直接修改state。 组件修改state,并不会重新触发render。列如:/...
  • 场景描述:页面有input框,输入改变state中testData.name 代码举例如下: {/*html部分*/} <Input onChange={this.textChange('name')} placeholder='请输入新的姓名' value={this.state.testData.name}/> ...
  • (虽然在mutation中可以异步的去修改state数据不会报错,但是会导致时间旅行等机制没有效果) 如果异步的修改的化,有两个大方案 不涉及action。在组件上异步代码走完之后再去调用 mutation 使用 action 使用 ...
  • react修改state中的对象数组

    千次阅读 2020-12-11 16:43:26
    一直把数据定义在store中没想过要把更改对象数组中的,这次放在state中了突然发现还不知道怎么修改state中对象数组的某个对象的某个键值,解决之后先将实现方式来简单记录一下 constructor() { super() this....
  • React native修改state中的数组

    千次阅读 2018-06-08 18:08:39
    今天遇到在react native中修改state中子项为数组的情况,一直赋值不成功,后来查资料发现native中数组是引用,不能直接对引用赋值,查找资料的时候找到了该网页: 修改数组项的时候要返回一个新数组,可以用扩展...
  • 在最近的一次需求开发过程中,有再次使用到Vuex,在状态更新这一方面,我始终遵循着官方的“叮嘱”,谨记“一定不要在action中修改state,而是要在mutation中修改”;于是我不禁产生了一个疑问:Vuex为什么要给出这...

空空如也

空空如也

1 2 3 4 5 ... 20
收藏数 286,422
精华内容 114,568
关键字:

修改state的值