☰

Reactコンポーネントの状態オブジェクトから属性を削除するにはどうすればいいですか？質問する

tag-icon • tag-icon reactjs state
Reactコンポーネントの状態オブジェクトから属性を削除するにはどうすればいいですか？質問する

状態にプロパティが設定された React コンポーネントがある場合:

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

"foo"ここから削除することは可能ですかObject.keys(this.state)?

の状態を置き換えるこの方法は試してみる価値のある明白な方法のように見えますが、すでに非推奨になっています。

ベストアンサー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。 からキーを完全に削除する必要がある場合、可能な解決策の1つは、1つの親を使用するstateことです。setStatekey、 そのようです

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>

おすすめ記事