将数据从父类传递给子函数 -props undefined答案

【问题标题】：Passing data from parent class to child function -props undefined将数据从父类传递给子函数 -props undefined
【发布时间】：2020-04-15 23:37:52
【问题描述】：

我正在尝试将数据“模板标题”传递给我的子组件并在选项下拉列表中显示它们。只是试图 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>
);

}

【问题讨论】：

标签： javascript reactjs

【解决方案1】：

试试这个：

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

console.log(template_titles);

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

当你的组件是一个函数而不是一个类时，你不能使用this。

并且在传递时，您也需要删除this：

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

因为您在 render 函数中这样定义它。

【讨论】：

当前记录未定义的模板标题。它应该显示一个数据数组。编辑：已修复我需要将 {this.template_titles} 更改为 {template_titles}
刚刚编辑了我的答案以解决您的其他问题:)

【解决方案2】：

实际上，在函数组件中，你不要太使用this，尤其是当你在参数的括号中析构props时，你可以像下面这样访问你的props：

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

  console.log(template_titles, handleCompose);

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

【讨论】：