機能は、私は次のコードブロックを持っている

Question

未定義です：私はthisに関数をバインドするconstructorにthis.fetchUser = this.fetchUser.bind(this);：

class App extends Component { 
    constructor(props) { 
    super(props); 
    this.state = { 
     avatar: '', 
     ...some more data... 
     } 

     this.fetchUser = this.fetchUser.bind(this); 
    } 

    render() { 
    return (
     <div> 
     <SearchBox onSubmit={this.fetchUser}/> 
     <Card data={this.state} /> 
     <BaseMap center={this.state.address}/> 
     </div> 
    ); 
    } 

    componentDidMount() { 
    function fetchUser(username) { 
     let url = `https://api.github.com/users/${username}`; 

     this.fetchApi(url); 
    }; 

    function fetchApi(url) { 
     fetch(url) 
     .then((res) => res.json()) 
      .... some data that is being fetched .... 
     }); 
     }; 

    let url = `https://api.github.com/users/${this.state.username}`; 
    } 
} 

export default App; 

しかし、私は次の行のためのTypeError: Cannot read property 'bind' of undefinedを取得します。

componentDidMountメソッドが表示され、バインディングに使用できるようにするにはどうすればよいですか？

編集：私はcomponentDidMount内の関数を入れている

理由は、StackOverflowの上の他のユーザーからの提案でした。あなたは本当に、親のデータをフェッチ 、状態doesntのは、本当にアドレスオブジェクトを保持していないためという

@BirdMars：彼はそれを示唆しました。親の componentDidMountにあるフェッチを呼び出し、そこで状態を更新します。これは 秒それは（あなたが取得し、更新状態を終えるまで、最初のコースの空state.address となりますレンダリング）

Answer 1

ここにいくつかの基本的な誤解がありますが、あなたはまだコールcomponentDidMount内部の機能は、しかし、あなたは彼らがその中ににを定義するべきではありませんすることができます。

単に「StackOverflowのから別の男」短い例である

componentDidMount() { 
    this.fetchUser(this.state.username); 
} 

function fetchUser(username) { 
    let url = `https://api.github.com/users/${username}`; 
    this.fetchApi(url); 
}; 

function fetchApi(url) { 
    fetch(url) 
    .then((res) => res.json()) 
     .... some data that is being fetched .... 
    }); 
}; 

Answer 2

アドレスオブジェクトに新しい状態で渡しますレンダリングトリガされますcomponentDidMount内で関数を宣言すると、そのスコープ内でしか表示されず、コンポーネント自体がアクセスします。あなたのコンポーネントでそれらを宣言してください。 彼がこの記事で話していたことは、componentDidMountから関数を呼び出すことでしたが、そこに宣言することはできませんでした。

Answer 3

その範囲の簡単な問題：

function outer(){ 
    function inner(){ 
    } 
} 
inner(); // error does not exist 

birdmarsあなたがマウントなかったコンポーネント内this.fetchUser()を呼び出す必要が示唆したように。関数を外部に宣言してください！

class App extends Component { 

    render() { 
    return (
     <div> 
     <SearchBox onSubmit={this.fetchUser}/> 
     <Card data={this.state} /> 
     <BaseMap center={this.state.address}/> 
     </div> 
    ); 
    } 
    fetchUser(username) { 
     let url = `https://api.github.com/users/${username}`; 

     this.fetchApi(url); 
    }; 

    fetchApi(url) { 
     fetch(url) 
     .then((res) => res.json()) 
      .... some data that is being fetched .... 
     }); 
     }; 
    componentDidMount() { 
    let url = username; //frome somewhere, most probably props then use props Changed function instead! 
    var user = his.fetchUser(url) 
    this.setState(() => {user: user}); 

    } 
} 

export default App; 

Answer 4

ここでは、componentDidMount外の関数を定義し、これはあなたの問題を解決しますコールcomponentDidMount()方法で機能をご提案しますが、定義することはありません彼らはそこにいる。

だから、代わりに

class App extends Component { 
    constructor(props) { 
     ... 
     this.fetchUser = this.fetchUser.bind(this); 
     this.fetchApi= this.fetchApi.bind(this); 
    } 
    ... 
    fetchUser(username) {...} 
    fetchApi(url) {...} 

    componentDidMount() { 
     this.fetchUser(...); 
     ... 
    } 
}