私はそれは状態だ上で設定されたプロパティを持っていた反応の成分を持っている場合はどのように私はReactjsコンポーネントの状態オブジェクト

Question

から属性を削除することができます

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

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

replaceStateメソッドは、試してみると明らかな方法のように見えますが、それ以降は償却されています。

Answer 1

あなたはとても

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

また、あなたがdelete、

delete this.state.foo; 
this.setState(this.state); 

を使用することができますが、このソリューションは、直接this.stateを操作するので、これは危険であるように、undefinedにfooを設定することができます

更新

以前のソリューションあなたは完全に可能な解決策の一つがそうのように、片方の親keyでsetStateすることができ、stateからキーを削除する必要がある場合だけfooとkeyスキルから値を削除すると、stateに存在します

var Hello = React.createClass({ 
 
    getInitialState: function() { 
 
    return { 
 
     data: { 
 
     foo: 10, 
 
     bar: 10 
 
     } 
 
    } 
 
    }, 
 
    \t 
 
    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>

Answer 2

以前の解決策 - 反パターンです。これはthis.stateを変更するためです。違います！

使用この（古い方法）：

let newState = Object.assign({}, this.state) // Copy state 
newState.foo = null // modyfy copyed object, not original state 
// newState.foo = undefined // works too 
// delete newState.foo // Wrong, do not do this 
this.setState(newState) // set new state 

または使用ES6砂糖：

this.setState({...o, a:undefined}) 

かなり甘い、あなたがいないのですか？古いで））

は、構文（オリジナルではなく、ES6）、これは、ストア内の不要なキーを削除this.replaceStateを、持っているが反応するが、今それはあなたのアプリケーションの状態の簡易コピーを作成するObject.assignを使用することができますdeprecated

Answer 3

です適切な深さで削除し、コピーから要素を削除します。次に、setStateを使用して、変更されたコピーをアプリケーションの状態にマージします。

これは完璧な解決策ではありません。このようにオブジェクト全体をコピーすると、パフォーマンス/メモリの問題が発生する可能性があります。 Object.assignのシャローコピーは、メモリ/パフォーマンスの問題を緩和するのに役立ちますが、新しいオブジェクトのどの部分がコピーであり、どの部分がアプリケーション状態のデータへの参照であるかを意識する必要もあります。

以下の例では、ingredientsの配列を変更すると、実際にアプリケーションの状態が直接変更されます。

望ましくない要素の値をnullまたはundefinedに設定しても、それが削除されません。

const Component = React.Component; 
 

 
class App extends Component { 
 
    constructor(props) { 
 
    super(props); 
 
    this.state = { 
 
     "recipes": { 
 
     "1": { 
 
      "id": 1, 
 
      "name": "Pumpkin Pie", 
 
      "ingredients": [ 
 
      "Pumpkin Puree", 
 
      "Sweetened Condensed Milk", 
 
      "Eggs", 
 
      "Pumpkin Pie Spice", 
 
      "Pie Crust" 
 
      ] 
 
     }, 
 
     "2": { 
 
      "id": 2, 
 
      "name": "Spaghetti", 
 
      "ingredients": [ 
 
      "Noodles", 
 
      "Tomato Sauce", 
 
      "(Optional) Meatballs" 
 
      ] 
 
     }, 
 
     "3": { 
 
      "id": 3, 
 
      "name": "Onion Pie", 
 
      "ingredients": [ 
 
      "Onion", 
 
      "Pie Crust", 
 
      "Chicken Soup Stock" 
 
      ] 
 
     }, 
 
     "4": { 
 
      "id": 4, 
 
      "name": "Chicken Noodle Soup", 
 
      "ingredients": [ 
 
      "Chicken", 
 
      "Noodles", 
 
      "Chicken Stock" 
 
      ] 
 
     } 
 
     }, 
 
     "activeRecipe": "4", 
 
     "warningAction": { 
 
     "name": "Delete Chicken Noodle Soup", 
 
     "description": "delete the recipe for Chicken Noodle Soup" 
 
     } 
 
    }; 
 
    
 
    this.renderRecipes = this.renderRecipes.bind(this); 
 
    this.deleteRecipe = this.deleteRecipe.bind(this); 
 
    } 
 
    
 
    deleteRecipe(e) { 
 
    const recipes = Object.assign({}, this.state.recipes); 
 
    const id = e.currentTarget.dataset.id; 
 
    delete recipes[id]; 
 
    this.setState({ recipes }); 
 
    } 
 
    
 
    renderRecipes() { 
 
    const recipes = []; 
 
    for (const id in this.state.recipes) { 
 
     recipes.push((
 
     <tr> 
 
      <td> 
 
      <button type="button" data-id={id} onClick={this.deleteRecipe} 
 
      >&times;</button> 
 
      </td> 
 
      <td>{this.state.recipes[id].name}</td> 
 
     </tr> 
 
    )); 
 
    } 
 
    return recipes; 
 
    } 
 
       
 
    render() { 
 
    return (
 
     <table> 
 
     {this.renderRecipes()} 
 
     </table> 
 
    ); 
 
    } 
 
} 
 

 
ReactDOM.render(<App />, document.getElementById('app'));

<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> 
 
<main id="app"></main>

Answer 4

次のコードは、直接this.stateを変異させずにthis.stateからfooを削除します：

const {foo, ...state} = this.state; 
this.setState({state}); 

あなたが仕事に、このためstage 3 presetが必要になります。

Answer 5

ReactCompositeComponent.jsのGitHubのリアクションソースには、_processPendingStateというメソッドがあります。これは、component.setStateの呼び出しから状態をマージする究極の方法です。

`` ` _processPendingState：function（props、context）{ var inst = this._instance; var queue = this._pendingStateQueue; var replace = this._pendingReplaceState; this._pendingReplaceState = false; this._pendingStateQueue = null;

if (!queue) { 
    return inst.state; 
} 

if (replace && queue.length === 1) { 
    return queue[0]; 
} 

var nextState = replace ? queue[0] : inst.state; 
var dontMutate = true; 
for (var i = replace ? 1 : 0; i < queue.length; i++) { 
    var partial = queue[i]; 
    let partialState = typeof partial === 'function' 
    ? partial.call(inst, nextState, props, context) 
    : partial; 
    if (partialState) { 
    if (dontMutate) { 
     dontMutate = false; 
     nextState = Object.assign({}, nextState, partialState); 
    } else { 
     Object.assign(nextState, partialState); 
    } 
    } 
} 

`` `マージを実装し、実際のラインを見ることができるコードで

。

nextState = Object.assign({}, nextState, partialState); 

どこにもこの機能では、それは本当に行動を意図していない意味deleteまたは類似の呼び出しは、ありません。また、setStateは常にマージであるため、statを完全にコピーし、プロパティを削除し、setStateを呼び出すことはできません。したがって、deletedプロパティは無視されます。

また、setStateはすぐには機能しませんが、バッチが変更されるため、状態オブジェクト全体を複製して1つのプロパティの変更のみを試みると、以前のsetStateの呼び出しを消去する可能性があります。 Reactの文書によれば、

リアクションでは、複数のsetState（）呼び出しを1つのアップデートにまとめてパフォーマンスを向上させることができます。

this.propsとthis.stateが非同期に更新される可能性があるため、次の状態を計算するためにその値に依存するべきではありません。

実際にはもっと情報を追加することができます。

this.setState({ xSet: true, x: 'foo' }); 
this.setState({ xSet: false, x: undefined }); 

これは許可され、醜いですが、それはあなたがundefinedに設定された値、およびすべてで設定されていない値を区別するために必要な情報の余分な部分を提供します。加えて、Reactの内部、トランザクション、状態変更のバッチ処理、その他の恐怖にはうってつけです。2番目の推測を試みるよりも複雑さを増やす方が良いでしょう。トランザクション調整のような恐怖、replaceStateのような非難される機能の管理などに繋がります。

Answer 6

削除が関数内にあり、変数にするには、これを試してみてください：

スティーブの答えとほぼ同じですが、関数内にあります。