別のコンポーネントで現在の状態にアクセスする方法は？

Question

別のコンポーネントでこのユーザーセットにアクセスしようとしています。私は状態を変更するこの関数を使用して最高のコンポーネント（これはapp）から状態を渡しました。

handleRegisterSubmit(e, username, password) { 
    e.preventDefault(); 
    axios.post('/auth/register', { 
     username, 
     password, 
    }).then(res => { 
     console.log(res.data.user.id) 
     this.setState({ 
     auth: res.data.auth, 
     user: res.data.user, 
     currentPage: 'selectSources', 
     }); 
    }).catch(err => console.log(err)); 
    } 

それはそれは私がヌルからユーザー情報を持つオブジェクトへのユーザーの状態を変更するところである応答を私に思い出させるバックエンドでモデルをヒットした後。

次に、その情報をホームコンポーネントに渡します。私は

renderSelectSources(){ 
    if (!this.state.dataLoaded){ 
     console.log(this.props.userInfo,'djfosidjfodisj') 
     return (
    <div> 
     {this.props.user} 
     <SelectSources user={this.props.userInfo} test={this.returnSources}/> 
     </div>) 
    } 
} 

この機能をヒットホームコンポーネント内

renderHomeIfloggedin(){ 
    if (this.state.auth){ 
    console.log(this.state.user) 
    return <Home auth={this.state.auth} userInfo={this.state.user}/> 
    } 
} 

私はその後、小道具を使用して、アプリケーション・コンポーネントからユーザオブジェクトにアクセスしよう。それをSelectsourcesコンポーネントに渡します。

選択ソースコンポーネント内部ニュースオブジェクトとユーザーオブジェクトを一緒に投稿し、バックエンドに送信したいと考えています。ニュースオブジェクトは正常に送信されていますが、現在の状態にアクセスするのに苦労しています。反応開発ツールを見ると、ユーザーの状態は私が望む情報ですが、何らかの理由でコンソールにログを記録すると、小道具の情報は定義されていません。

handleClick(source_object) { 
    console.log(source_object,'ioefjsoejfoi',this.props.user); 
    axios.post('/news', { 
    source: source_object, 
    }) 
    .then(res => { 
    console.log("Posted"+ source_object.source.name); 
    console.log(res); 
    }) 
    .catch(err => console.log(err)); 

スクリーンショットは、ユーザーオブジェクトがまだ現在の状態であるため、どこが間違っているのかわかりません。

Answer 1

それはあなたの問題はthisがメソッド​​であるかについてだと思われ、その名前によって、私は方法が押下されるボタンのコールバックのいくつかの種類があることを前提とし、そのための方法は、上の呼び出されたときthisオブジェクトはもはや（あなたのUserInfoがある）あなたのSelectSourcesクラスのthis

を指してクリックイベントでは、SelectSourcesクラスのコンストラクタで、あなたの方法をバインドする必要があり、この問題を解決するには

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

    // Make sure the handleClick method is always pointing to the this of this class 
    this.handleClick = this.handleClick.bind(this); 
    } 
}