Блог

Главная - Вопросы по программированию - «this.state» или методы недоступны в Reactjs

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

#javascript #reactjs

#javascript #reactjs

Вопрос:

У меня есть пример кода для генерации дерева. Но он показывает ошибки, которые 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 /

Комментарии:

1. Вам, вероятно, нужно выполнить привязку this для вашей this.renderNode функции, например this.renderNode = this.renderNode.bind(this)

2. состояние недоступно через onClickNode ? кстати, вы знаете, что вы устанавливаете this.state.action null вместо node , потому что это ваш первый параметр внутри onClickNode ..

3. @Ido да, это значение равно нулю, и оно должно возвращать «null», но вместо этого оно возвращает undefined.

4. Вы установили для дерева состояний значение tree? Что такое дерево? Я думаю, что это дерево не определено, когда вы пытаетесь установить свое состояние.

5. @Boky tree — это имя переменной, которое содержит словарь. все в порядке.

Ответ №1:

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

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

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

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

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

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

Комментарии:

1. Спасибо за ваш ответ, но когда я определил this.renderNode = this.renderNode.bind(this); , он перейдет в бесконечный цикл, и мой браузер выйдет из строя.

2. @Mortezaipo Я также заметил, что ваш onClick обработчик выполняет функцию this.onClickNode(null, node) , а не просто передает ссылку на функцию. Вероятно, вам следует this.onClickNode вернуть функцию, которая затем содержит ваш node объект. Это может быть источником вашего бесконечного цикла.

3. Поэтому я должен добавить это вместо этого: onClick={this.onClickNode} ?

Метки: