如何从Reaction组件的状态对象中删除属性 [英] How can I remove an attribute from a React component's state object

问题描述

如果我有一个状态设置了属性的Reaction组件：

onClick() {
    this.setState({ foo: 'bar' });
}

是否可以从Object.keys(this.state)从此处删除"foo"？

replaceState方法看起来像是要尝试的明显方法，但它已被弃用。

推荐答案

可以将foo设置为undefined，如

var Hello = React.createClass({
    getInitialState: function () {
        return {
            foo: 10,
            bar: 10
        }
    },

    handleClick: function () {
        this.setState({ foo: undefined });
    },

    render: function() {
        return (
            <div>
                <div onClick={ this.handleClick.bind(this) }>Remove foo</div>
                <div>Foo { this.state.foo }</div>
                <div>Bar { this.state.bar }</div>
            </div>
        );
    }
});

Example

更新

上一个解决方案只是从中删除值，技能存在于中，如果您需要从中完全删除键，一种可能解决方案可以是具有一个父级的<[2-8]key，就像这样<2-5]><2-5]>技能存在于中，如果您需要从中完全删除键，则其中一个可能的解决方案可以是具有一个父级的setState，就像这样<2-5]>技能存在于中，如果您需要从中完全删除键，则其中一个可能的解决方案可以是具有一个父级的

var Hello = React.createClass({
  getInitialState: function () {
    return {
      data: {
        foo: 10,
        bar: 10
      }
    }
  },
    	
  handleClick: function () {
    const state = {
      data: _.omit(this.state.data, 'foo')
    };
    
    this.setState(state, () => {
      console.log(this.state);
    });
  },
        
  render: function() {
    return (
      <div>
        <div onClick={ this.handleClick }>Remove foo</div>
        <div>Foo { this.state.data.foo }</div>
        <div>Bar { this.state.data.bar }</div>
      </div>
    );
  }
});

ReactDOM.render(<Hello />, document.getElementById('container'))

<script src="https://cdn.jsdelivr.net/lodash/4.17.4/lodash.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>
<div id="container"></div>

这篇关于如何从Reaction组件的状态对象中删除属性的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！