React setState如何删除某个属性

Question

问题描述

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

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

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

Answer 1

this.setState((prevState, props) => {
    delete prevState.prop;
    return prevState;
});

Answer 2

换个思路，删除了某个属性，也就是调用的时候回得到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。

Answer 3

最简单的情况，用delete运算符：(注意: 赋值null或undefined还是会看到值在属性上)

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)
    })
  }

最后打印

Answer 4

delete this.state.某个属性 ?

Answer 5

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

Answer 6

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