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

Question

I have a React component that uses querySelectorAll to get the value of elements on the page then renders them in the component. With the code below I am getting the error 'Cannot set property of 'label1' of undefined', but i'm not sure why as it's finding the value correctly using the querySelector and this.label1 is a global variable.

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

You reference this here:

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

But this is not referencing the instance. You will have to bind that method in the constructor or use an ES7 class property for that:

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

or

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

Answer 2

You should be using react's state:

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

and then call setState({ label1: labels[0] }) for example.