无法读取未定义的 React js 的属性“函数名称”答案

【问题标题】：cannot read property 'function name' of undefined React js无法读取未定义的 React js 的属性“函数名称”
【发布时间】：2020-05-07 03:24:05
【问题描述】：

我正在使用来自 https://react-bootstrap.netlify.app/components/modal/ 的模式，基本上我已经设法从我单击的按钮显示模式。然而，在模式中有另一个按钮，当我单击时应该执行我已经在函数中定义的任务。现在，当我在模式中单击此按钮时，我收到错误 cannot read property 'confirm_booking' of undefined 这是我的代码。

constructor(props){
         super(props)

           this.state={
                          setModalShow_available_room: false,
                          modalShow_available_room: false
                        }

                 this.confirm_booking = this.confirm_booking.bind(this)
          }

render (){

            function Available_room_modal(props) {
            return (
                <Modal
                    {...props}
                    size="sm"
                    aria-labelledby="contained-modal-title-vcenter"
                    centered>

                    <Modal.Body>
                        <Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>
                    </Modal.Body>

                </Modal>
            );
        }

return(
           <div>
                  <Button block onClick={() => { this.open_modal() }} >Show modal</Button>

                   <Available_room_modal
                    show={this.state.modalShow_available_room}
                    onHide={() => {
                        this.setState({ setModalShow_available_room: false })
                        this.setState({ modalShow_available_room: false })
                    }} />
           </div>
)


}

/**then for my functions **/

/**this opens the modal **/
open_modal() {
            this.setState({ setModalShow_available_room: true })
            this.setState({ modalShow_available_room: true })
    }

/**this is the function assigned to the button inside the modal which throws an error when i click it**/
confirm_booking() {   
     this.setState({ setModalShow_available_room: false })
     this.setState({ modalShow_available_room: false }) 
    }

【问题讨论】：

Creating a component in the render function is an anti-pattern. 将Available_room_modal 移出您的组件。你甚至可以把它做成自己的文件。
这能回答你的问题吗？ How to access the correct `this` inside a callback?
问题是function Available_room_modal 创建了自己的上下文（在上面的链接中解释），这意味着在这个函数内部，this.confirm_booking 是未定义的。
快速解决方法是将一些this.confirm_booking 作为道具传递给Available_room_modal ：<Available_room_modal onConfirm={this.confirm_booking} /* etc. */ />

标签： javascript reactjs

【解决方案1】：

您显然不了解 react 的工作原理。请先尝试查看 react 文档。

我将尝试向您展示您的一些错误：

您不能在 render 方法中声明函数。渲染方法只是返回 JSX 代码。你可以在类中声明一个函数，从那里返回jsx并从render中调用它，这是有效的。

<Button block onClick={() => { this.confirm_booking() }} >Confirm</Button>

在这里，您每次渲染组件时都会调用 this.confirm_booking。你应该把它改成这样：

<Button block onClick={this.confirm_booking}> Confirm </Button>

【讨论】：

将其更改为 {this.confirm_booking} TypeError: Cannot read property 'confirm_booking' of undefined 后出现此错误
我将函数从渲染方法中取出，并像其他函数一样声明它，现在它给出了Available_room_modal' is not defined react/jsx-no-undef
@sam 你的部分代码已经是正确的，另一方面，这个答案是不正确的。