如何从Reactjs组件的状态对象中删除属性

Question

如果我有一个在其状态上设置了属性的react组件：

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

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

该replaceState方法看起来像明显的方法来尝试，但它至今已贬值。

Answer 1

您可以设置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

更新资料

先前的解决方案只是从中删除价值foo而 key
存在的技能state，如果您需要从中完全删除密钥state，则可能的解决方案之一可以是setState与一位父母同住 key ，就像这样

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>