Реагентная функция, переданная ребенку через опоры, не определена

Question

Я пытаюсь передать selectNotebook в notebookNav, который будет использоваться в функции onClick(). Я вижу selectNotebook в моей подсказке в инструментах React dev, но всякий раз, когда я нажимаю кнопку, я получаю ошибку Uncaught TypeError: Cannot read property 'selectNotebook' of undefined(…).

Это мой родительский компонент:

var App = React.createClass({ 

    getInitialState: function() { 
    return { 
     notebooks: this.props.notebooks, 
     nav: this.props.nav 
    }; 
    }, 

    selectNotebook: function(id) { 
    const nav = {...this.state.nav}; 
    nav[notebook] = this.props.notebooks[id]; 
    this.setState({nav}) 
    }, 

    render: function() { 
    return (
     <div style={{"height": "100%"}}> 
     <NotebookNav 
      notebooks={this.props.notebooks} 
      selectNotebook={this.selectNotebook} 
     > 
     </NotebookNav> 
     <Technique></Technique> 
     </div> 
    ); 
    } 
}); 

Это ребенок компонент:

var NotebookNav = React.createClass({ 

    render: function() { 
    notebooks = this.props.notebooks; 

    return (
     <div className="col-md-4"> 
     <div className="panel panel-info"> 
      <div className="panel-heading"> 
      <h4 className="panel-title">Your Notebooks</h4> 
      </div> 

      <div className="panel-body"> 
      <ul className="breadcrumb" 
       style={{"backgroundColor": "#fff", "marginBottom": "0"}} 
      > 
       <li className="active"> 
       notebooks 
       </li> 
      </ul> 

      <ul className="nav nav-pills nav-stacked"> 
       <div className="btn-group-vertical" style={{"width": "100%"}}> 
       {notebooks.map(function (notebook) { 
        return(
        <li 
         key={notebook.id} 
         className="btn btn-block btn-raised btn-lg" 
         onClick={() => this.props.selectNotebook(notebook.id)} 
        > 
         {notebook.name} 
        </li> 
       ); 
       })} 
       </div> 
      </ul> 
      </div> 
     </div> 
     </div> 
    ); 
    } 
}); 

Answer 1

 <div className="btn-group-vertical" style={{"width": "100%"}}> 
     {notebooks.map(function (notebook) { 
      return(
      <li 
       key={notebook.id} 
       className="btn btn-block btn-raised btn-lg" 
       onClick={() => this.props.selectNotebook(notebook.id)} 
      > 
       {notebook.name} 
      </li> 
     ); 
     })} 
     </div> 

Проблема заключается в том, что функция преобразования передается map будет создавать свою собственную область применения, где this не определено. Чтобы это исправить, Array.prototype.map принимает второй аргумент для области, где вы можете передать this от вашей внешней области:

{notebooks.map(function (notebook) { ... }, this) 

Если целевая среда поддерживает также можно использовать функцию стрелки, которая неявно использует внешнюю сферу:

{notebooks.map((notebook) => { ... })} 

Answer 2

попробовать передать его связыванием с помощью этого: -

<NotebookNav 
     notebooks={this.props.notebooks} 
     selectNotebook={this.selectNotebook.bind(this)} 
    > 

, а затем на ваш дочерний элемент, а также использовать стрелки FUNC ции, так что его оценка: -

{notebooks.map((notebook) => { 
     return(
     <li 
      key={notebook.id} 
      className="btn btn-block btn-raised btn-lg" 
      onClick={() => this.props.selectNotebook(notebook.id)} 
     > 
      {notebook.name} 
     </li> 
    ); 
    })}