Javascript - 子どもの状態の変化が親に残っていない

Question

こんにちは（私は子どもの親のコミュニケーションのシステムを採用して、私のReactアプリケーションのページの1つでは、私はオン/オフを切り替えることができるように、これらの変更を別のページにまたがって維持できるようにするために、いくつかの「スイッチ」オブジェクトを用意したいと思っています。 ：

1. は私の親の状態を作成します。

   class dashboard extends Component { 
       constructor(props) { 
       super(props); 
       this.updateObject.bind(this); 
   } 
   state = { 
       test_dictionary: {'test': false} 
   }; 
   

2. DEFIを上記の状態を更新する親内の関数。

   updateObject(current_key) { 
       var new_state = Object.assign({}, this.state.test_dictionary); 
       new_state[current_key] = !new_state[current_key]; // I want to flip the boolean when clicked 
       this.setState({test_dictionary: new_state}); 
   } 
   

3. 次に、状態と機能（上に示した）を親から子に渡します。

   <childView test_dictionary={this.state.test_dictionary} updateObject={this.updateObject}/> 
   

4. 最後に、かつて私は、私が機能し、毎回内のスイッチオブジェクトが変更された親の状態で辞書を更新するために渡された状態を使用しようと、子の内側です。

   <Switch 
       checked={this.props.test_dictionary['test']} 
       onChange={this.props.updateObject.bind('test')} 
   /> 
   

しかし、これは私はそれが何を期待する何をしていません。私は子どもの親のコミュニケーションを設定する方法の数多くの異なる例を読んでみることにしました。

Uncaught TypeError: Cannot read property 'updateObject' of undefined 
at String.handleSelectionChange (childView?9911:28) 
at String.handleSelectionChange (createPrototypeProxy.js?9d62b87:44) 
at Switch.setChecked (Switch.js?bc7e1ee:54) 
at toggle (Switch.js?bc7e1ee:105) 
at Object.ReactErrorUtils.invokeGuardedCallback (ReactErrorUtils.js?c23a69d:69) 
at executeDispatch (EventPluginUtils.js?46a03e1:85) 
at Object.executeDispatchesInOrder (EventPluginUtils.js?46a03e1:105) 
at executeDispatchesAndRelease (EventPluginHub.js?2c8fe93:43) 
at executeDispatchesAndReleaseTopLevel (EventPluginHub.js?2c8fe93:54) 
at Array.forEach (<anonymous>) 

私はあなたが提供できる任意のヘルプをお願い申し上げます

Answer 1

私はこれが原因である100％わからないんだけど、それ：私は「M Iは、スイッチオブジェクトをクリックしようとするとなっているエラー！

<Switch 
    checked={this.props.test_dictionary['test']} 
    onChange={this.props.updateObject.bind('test')} 
/> 

updateObject'test'のコンテキストで実行されて、私は親のを呼び出すために必要がある場合：。。bindだから、あなたがこれを行うとき、そのthis文脈どんな引数に設定されているあなたはそれを渡す新しい関数を返すためである可能性がありコールバック小道具子供から、私は通常、このようにそれを実行します。

<Switch 
    checked={this.props.test_dictionary['test']} 
    onChange={() => {this.props.updateObject('test')}} 
/> 

onChangeの矢印機能を注意してください。このようにして、コールバック・プロップを正しく呼び出すための新しい関数を作成できますが、必要なパラメータを渡します。私がコメントするのに十分な評判を持っていない

Answer 2

、しかし、あなたが言ったjered何をやった後、あなたがTypeError: Cannot read property 'test_dictionary' of undefinedを取得していることが矢印機能はない場合、私は矢印関数にupdateObjectを変更しようと、 thisは、あなたが考えているthisを必ずしも指しているわけではありません。

はこれに機能を変更してみてください：

updateObject = (current_key) => { 
    var new_state = Object.assign({}, this.state.test_dictionary); 
    new_state[current_key] = !new_state[current_key]; // I want to flip the boolean when clicked 
    this.setState({test_dictionary: new_state}); 
} 

Answer 3

あなたは非常に奇妙な場所に状態を置いているように見えます。コンポーネントの実際のスコープにないので、常に未定義となる可能性があります。

class dashboard extends Component { 
    constructor(props) { 
     super(props); 

     this.state = { 
     test_dictonary: { test: false } 
     }; 
     this.updateObject.bind(this); 
    } 

    updateObject(current_key) { 
     const new_key = !this.state.test_dictonary[current_key]; 
     this.setState({test_dictionary: new_key}); 
    } 

    render() { 
     return (
     <childView test_dictionary={this.state.test_dictionary} updateObject={this.updateObject}/> 
    ) 
    } 
} 

これをスイッチで実行して、オリジナルのエラーの原因となる面白いバインドを防ぐことができます。

<Switch 
    checked={this.props.test_dictionary['test']}} 
    onChange={() => { this.props.updateObject('test'); }} 
/>