React setState如何删除某个属性

叶绿素
  • 20

问题描述

假如我们的state是一个对象{},因为setState做的是合并操作嘛,那么如果我想要删除state中的某个属性,我应该如何setState呢?

问题出现的环境背景及自己尝试过哪些方法

尝试过直接赋值,但是这样是不好的

回复
阅读 5.3k
6 个回答
this.setState((prevState, props) => {
    delete prevState.prop;
    return prevState;
});

换个思路,删除了某个属性,也就是调用的时候回得到undefined。那你想删除哪个,就给哪个属性赋值undefined好了。

如果属性不多的话,可以在return的时候删除掉指定的属性。

const obj1 = {name:'xiaohong', age:'18', sex:'2', fav:'singing'}
const obj2 = {school:'tsinghua', face: 'beautiful'}
return { ...obj1, ...obj2 }; //一般合并操作
return { ...obj1, obj2.school }; //删除face属性

试试好不好用吧,不过常规的做法还是赋值undefined。

最简单的情况,用delete运算符:(注意: 赋值nullundefined还是会看到值在属性上)

let newState = this.state
delete newState[keyname]
this.setState({ newState })

复杂一点的情况,用omit或omitDeep,示例:

一开始的state

this.state = {
      hasValue: false,
      data: {
        user: 'Bing Bing',
        foo: 123,
        bar: '111',
      },
    }

图片描述

handleChangeStateByOmit

handleChangeStateByOmit = () => {
    const newState = {
      data: _.omit(this.state.data, ['user', 'bar']),
    }

    this.setState(newState, () => {
      console.log(this.state)
    })
  }

最后打印

图片描述

delete this.state.某个属性 ?

不用设置为null或者'',垃圾回收机制会自动清除吧。

  1. 可以设置成null
  2. 可以思考一下是否需要删除这个属性,能否用其他值代替,比如为了隐藏、不去渲染某个组件,可以用isShow来表示。
你知道吗?

宣传栏