Reactingコンポーネント内の関数への参照オブジェクト

Question

myData.genderを使用してgetMessage()関数内のmyDataオブジェクトのプロパティにアクセスしようとすると、次のコンポーネントで未定義のエラーが発生します。

私はmyData.myData.genderを試してみるとうまくいきます。何故ですか？

getMessage()関数に入ってくるmyDataを調べると、それはオブジェクトであり、その中にmyDataオブジェクトが含まれていることがわかります。私はなぜmyDataオブジェクトが別のオブジェクトの内部に置かれているのか混乱しています。

興味深いことに、あなたはここでラインに<div>Hello {myData.firstName}</div>

を見ることができるように、私のコンポーネントの内部で、私は直接のプロパティにアクセスすることができ、私の簡単なコンポーネントを反応させるのだ：

import React, {Component} from 'react'; 

const MyComponent = ({myData}) => { 

    return(

     <div>Hello {myData.firstName}</div> 
     <div> 

      {getMessage(myData)} 

     </div> 
    ); 
}; 

const getMessage(myData) => { 

    let output = ""; 

    if(myData.Gender == "m") { 
     output = "<span>Enjoy the football game tonight!</span>"; 
    } 
    else { 
     output = "<span>Enjoy your roses!</span>"; 
    } 

    return output; 

} 

ChannelContent.propTypes = { 
    myData: PropTypes.object.isRequired 
}; 

export default MyComponent; 

Answer 1

あなたが問題になっているかのどちらかのタイプミスをしましたコード内で：

ではなくmyData.Gender == "m"