將數據從父 class 傳遞給子 function -props undefined

Question

我正在嘗試將數據“template_titles”傳遞給我的子組件並將它們顯示在選項下拉列表中。 只是試圖 console.log 數據以確保它通過。 當前遇到未定義屬性道具的問題。

父組件

    render() {
    if (!this.props.show) {
        return null;
    }

    const template_titles = this.state.email_template.map((a) => a.title);
    console.log(template_titles);

    return (
        <div className='compose-email'>
            <div className='directory'>
                <div className='background' />
                <div className='box'>
                    <ion-icon
                        id='close-email'
                        name='close'
                        onClick={this.onClose}
                    ></ion-icon>
                    <ion-icon
                        id='square-email'
                        name='square'
                        onClick={this.onClose}
                    ></ion-icon>
                    <h1 className='candidate-name-compose-email'>
                        Candidate Name
                    </h1>
                    <hr></hr>
                    <h1 className='compose-email-title-compose-email'>
                        Compose Email
                    </h1>
                    <ComposeEmailForm
                        handleCompose={this.sendNewEmail}
                        template_titles={this.template_titles}
                    />
                </div>
                <ToastContainer className='toast-container' />
            </div>
        </div>
    );
}

子組件

    export default function ComposeEmailForm({ handleCompose }) {

console.log(this.props.template_titles);

return (
    <div className='container'></div>
);

}

Answer 1

試試這個：

export default function ComposeEmailForm({ handleCompose, template_titles }) {

console.log(template_titles);

return (
    <div className='container'></div>
);

當您的組件是 function 而不是 class 時，您不能使用this 。

當通過它時，你也需要刪除this ：

 <ComposeEmailForm
    handleCompose={this.sendNewEmail}
    template_titles={template_titles}
 />

因為您在render function 中如此定義它。

Answer 2

實際上，在 function 組件中，您並不會太使用this ，尤其是當您在參數的括號中破壞props時，您可以訪問您的道具，如下所示：

export default function ComposeEmailForm({ handleCompose, template_titles }) {

  console.log(template_titles, handleCompose);

  return (
    <div className='container'></div>
  );
};