«this.state» или методы недоступны в Reactjs

Question

У меня есть образец кода для генерации дерева. Но он показывает ошибки, которые this.state.action или this.onClickNode не определены, пока я определил их все в конструкторе.

export default class TreeList extends React.Component { 
    constructor(props) { 
    super(props) 
    this.state = {tree: tree, action: null} 
    this.onClickNode = this.onClickNode.bind(this) 
    } 
    onClickNode(node) { 
    this.setState({active: node}) 
    } 
    renderNode(node) { 
    console.log(this.state.action) 
    return (
     <span onClick={this.onClickNode(null, node)}> 
     {node.module} 
     </span> 
    ); 
    } 
    render() { 
    return (
     <div> 
     <Tree tree={this.state.tree} renderNode={this.renderNode}/> 
     </div> 
    ) 
} 

}

Я использовал эту библиотеку: https://pqx.github.io/react-ui-tree/

Answer 1

Вы должны связать this к вашей renderNode функции, потому что this является not automatically bound для классов ES6. В противном случае у вас не будет соответствующего контекста в вашей функции. Вот почему ваш this.state.action не определен и почему он не может решить this.onClickNode.

В конструкторе добавьте

this.renderNode = this.renderNode.bind(this); 

Кроме того, если вы хотите использовать узел в обработчике OnClick, вы можете переключить его в

onClickNode(firstParam, node) { 
    return (event) => { 
     this.setState({active: node}) 
    } 
    } 

Я предполагаю, что то, что происходит в том, что this.renderNode выполняется при вызове render(), который затем выполняет this.onClickNode, а затем обновляет номер state. Ну, так как обновляется state, он снова вызовет render().