javascript - 未捕获的类型错误 : Cannot read property 'openModal' of undefined at onClick React

Question

我正在获取

   Uncaught TypeError: Cannot read property 'openModal' of undefined
        at onClick

具有以下 react 组件:

class ReactReduxTabs extends React.Component {
  constructor(props){
      super(props);
      this.openModal = this.openModal.bind(this);
      this.closeModal = this.closeModal.bind(this);
      this.render_response_json_modal = this.render_response_json_modal.bind(this);
      this.state = {tabIndex: 1, isModelOpen: false, modalText: "blah blah blah"};
  }

  openModal() {
    console.log("open modal");
    this.setState({ isModalOpen: true })
  }

  closeModal() {
    this.setState({ isModalOpen: false })
  }

  render_response_json_modal(headers, target_header) {
      return add_rendering(
          headers,
          target_header,
          function(val, row) {
              return (<p onClick={() => {this.openModal()} }>yaaaaaaa</p>)
          }
      )
  }

render() {

      if (orderMetricsFetched == true) {

        order_metrics.error_report_failed_orders.headers = this.render_response_json_modal(order_metrics.error_report_failed_orders.headers, 'RESPONSE', this.openModal)

        return (

<div className="card">
                      <ReduxDataTable data={order_metrics.error_report_failed_orders}/>
                    </div>

add_rendering 的作用是采用类似的内容

headers = ['Header 1', 'Header 2']

如果您的目标标题 1 更改为

headers= [
  {title: 'Header 1', render: function() { ...returns what should go in the table cell...} },
  'Header 2'
]

问题似乎出在单击表格单元格时的 this 上下文。单击表格单元格时，它应该调用组件的 openModal 方法。

好消息是它非常接近，表格按其应有的方式呈现，每个 RESPONSE 列单元格内部都有随机的“yaaaaa”，证明 add_rendering render_response_json_modal 有效。在我单击每个 RESPONSE 单元格(“yaaaa”之一)之前，不会出现任何错误，我会在控制台中看到以下打印内容:

Answer 1

这里:

return (<p onClick={() => {this.openModal()} }>yaaaaaaa</p>)

this 指的是函数作用域而不是外部作用域(这就是您想要的)，快速修复方法是在函数外部保存 this 的引用并使用那个。

var self = this;   
return add_rendering(
  headers,
  target_header,
  function(val, row) {
     return (<p onClick={() => {self.openModal()} }>yaaaaaaa</p>)
  })
);

顺便说一句，异常表明 this 在函数内部未定义，可能是因为您使用的是“use strict” 模式。