Question

我有一个React组件，该组件使用querySelectorAll来获取页面上元素的值，然后将其呈现在组件中。在下面的代码中，我收到错误消息“无法设置未定义'label1'的属性'，但我不确定为什么要使用querySelector正确找到该值，而this.label1是全局变量。

import React from 'react'

class StickyNav extends React.Component {

  setLabels (labels) {
    const [ label1, label2 ] = labels
    if (!label1 || !label2) return
    this.label1 = label1.textContent
    this.label2 = label2.textContent
  }

  getQuery (query, callback) {
    const el = document.querySelectorAll(query)
    if (!el) return
    if (callback) callback(el)
  }

  shouldComponentUpdate (nextProps, nextState) {
    if (this.state.fixed !== nextState.fixed) {
      this.getQuery('#navBar .form-group label', this.setLabels)
      return true
    }
    return false
  }

  render () {
    return (
      <div>
        <div className='form-group'>
          <label htmlFor='choice1'><h4>{this.label1}:</h4></label>
          <span id='choice1'> &nbsp;text</span>
        </div>
        <div className='form-group'>
          <label htmlFor='choice2'><h4>{this.label2}:</h4></label>
          <span id='choice2'> &nbsp;text</span>
        </div>
      </div>
    )
  }
}

export default StickyNav

Answer 1

您在此处引用this

  setLabels (labels) {
    const [ label1, label2 ] = labels
    if (!label1 || !label2) return
    this.label1 = label1.textContent
    this.label2 = label2.textContent
  }

但是this没有引用实例。您将必须在构造函数中绑定该方法，或为此使用ES7类属性：

  constructor(props) {
    super(props)
    this.setLabels = this.setLabels.bind(this)
  }

或

  setLabels = () => {....}

Answer 2

您应该使用react的状态：

constructor(props) {
    super(props)
    this.state = { 
        label1: null,
        label2: null,
    }
}

然后例如致电setState({ label1: labels[0] })。

反应-无法设置未定义的属性

2 个答案: