React Store對`this`的值返回null

我遇到一個問題，其中this在我的商店中爲我的React組件返回null。我相信我需要對此加以約束，但我不確定。我也在使用React Router，並將我的組件設置在一個包裝中，這樣我就可以將道具傳遞給它。任何幫助表示讚賞！React Store對`this`的值返回null

COMPONENT

import React from 'react'; 
import PaymentStore from './../store/paymentStore'; 

class InitialPaymentScreen extends React.Component { 
    constructor(props) { 
    super(props) 
    } 
    render() { 
    console.log(this.props) 
    return (
     <div className="payment-form-submit" onClick={this.props.store.init}>Next</div> 
    ); 
    } 
} 

class PaymentForm extends React.Component { 
    constructor(props) { 
    super(props) 
    } 

    render() { 
    return (
     <section className="main-content payment-form-wrapper"> 
     <InitialPaymentScreen store={this.props.store}/> 
     </section> 
    ); 
    } 
} 

export default class PaymentFormWrapper extends React.Component { 
    render() { 
    return (
     <PaymentForm store={PaymentStore} mode="foo"/> 
    ); 
    } 
}

STORE

let PaymentStore = { 
    handleClickNext() { 

    console.log("hello") 

    }, 
    init() { 
    console.log(this) // returns null 
    this.handleClickNext(); // cannot read property of null 
    }, 
}; 

export default PaymentStore;

來源

2016-06-28 u111937

看起來像你需要確實綁定。你可以通過改變

到

<div className="payment-form-submit" onClick={this.props.store.init.bind(this.props.store)}>Next</div> 

# or 

var init = this.props.store.init.bind(this.props.store); 
<div className="payment-form-submit" onClick={init}>Next</div>

或者，如果InitialPaymentScreen只需要init從store，結合可在PaymentForm發生，InitialPaymentScreen只能接收功能。

綁定需要完成，因爲在某些方面，javascript是獨一無二的。

通常情況下，函數的this必然會被從字面上綁定到它被調用的地方。在你的情況下，store.init()意味着init函數具有this作爲商店。

現在，如果您將store.init分配給一個變量並調用它，它不知道什麼是this！（this可能是人們學習JS的最常見的問題） - 因爲調用時，它試圖通過了解哪些對象是功能推斷this存儲在

要獲得使函數知道什麼是它的上下文那麼，你有兩個選項基本上都是：

a。 fn.bind(something)，它返回一個綁定函數，或者

b。創建一個匿名函數，調用該函數

來源

2016-06-28 14:39:44

太棒了，就像一個魅力。你能否澄清爲什麼我必須把這個綁定？ – u111937

當然，我剛剛更新了一些背景的答案！ –

React Store對`this`的值返回null

回答

相關問題