アクセスコンポーネント `this` from container

Question

私はコンポーネントを実行する必要がある関数を渡すためにpropsを使用しています。コンポーネントをできるだけダムにしておきます。反応クラスに関数を入れる代わりに。

コンポーネントの状態を更新する必要がありますが、私のprop機能内からsetStateにアクセスする際に問題があります。私の関数がそれにアクセスすることができますので、私は、何かのようにやってみましたが、私はエラーになっておく：

コンポーネント

componentDidMount(){ 
    this.props.loadImage(this.props.src).bind(this); 
    } 

コンテナロードイメージ関数

let loadImage = (src)=>{ 
    console.log('loading Image');  
    fetch(src).then(function(data) { 
     console.log('success'); 
     that.setState({'imgUrl':src}); 
    }).catch(function(error) { 
     console.log('fail'); 
     setTimeout(loadImage(src), 1000); 
    }); 

}; 

エラー：

を

component.js:67 Uncaught TypeError: Cannot read property 'bind' of undefined(…) 

1. なぜこのバインドが未定義であるかop関数？
2. 私はこれに間違った方法で近づいていますか？

ありがとう！

Answer 1

loadImageが関数を返さない場合は、おそらくbindを未定義に呼び出している可能性があります。あなたは代わりにthis.props.loadImage.bind(this, this.props.src);をしたいかもしれません。

Answer 2

なぜ最初にthisをバインドするのですか？

class Example extends React.Component { 
 
    constructor() { 
 
    super(); 
 
    this.state = { 
 
     data: '' 
 
    } 
 
    } 
 
    componentDidMount() { 
 
    this.doSomething('hello'); 
 
    } 
 
    doSomething(data) { 
 
    this.setState({ 
 
     data 
 
    },() => console.log(this.state)); 
 
    } 
 
    render() { 
 
    return(
 
     <div>{this.state.data}</div> 
 
    ); 
 
    } 
 

 
} 
 

 
ReactDOM.render(<Example/>, document.getElementById('View'));

<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="View"></div>