Не удалось прочитать свойство 'флажок' из неопределенного, из статической функции React.Component

Question

У меня есть React.Component, и я хочу вызвать эту статическую функцию из множества различных React.Component.

class Categories extends React.Component {
  constructor(props) {
    super(props);
    this.getCheckedCategories = this.getCheckedCategories.bind(this);
    this.state = {
      checked: [],
      unchecked: []
    };
  }

  static getCheckedCategories() {
    return this.state.checked;
  }
}

Итак, я попытался подключить функцию.

import Categories from './product/checkboxes';

class FullWidthGrid extends React.Component {
  constructor(props) {
    super(props);
    this.state = {

    }
  }

  render() {
    const { classes } = this.props;
    const checkedCategories = Categories.getCheckedCategories();
  }
}

Answer 1

static функции не могут получить доступ к this, то есть статические вызовы методов выполняются непосредственно в классе и не могут вызываться в экземплярах класса. Вы можете прочитать больше об этом здесь .

Так что в вашем случае вы могли бы сделать:

class Categories extends Component {
  state = {
    checked: [],
    unchecked: []
  };

  static getCheckedCategories = (klass) => {
    return klass.state.checked
  }

  render() {
    return (
       <div>{Categories.getCheckedCategories(this)}</div>
    );
  }
}

Рабочий пример здесь .

Answer 2

Это цель статической функции. Он не может получить доступ к экземпляру (this). У вас может быть несколько экземпляров класса, но только одна статическая функция / свойство.

В качестве обходного пути (зависит от того, что вы хотите сделать), вы можете использовать статическое свойство для хранения вашего состояния:

class Categories extends React.Component {
  constructor(props) {
    super(props);
    Categories.state = {
      checked: [],
      unchecked: []
    };
  }

  static getCheckedCategories() {
    return Categories.state.checked;
  }
}

Однако он не будет работать с setState, так как это метод экземпляра.

Представьте себе ситуацию, когда у вас есть несколько Categories компонентов, и у каждого есть разные отмеченные / непроверенные категории. Что бы тогда вернула Categories.getCheckedCategories() функция?

Если вы хотите иметь общее состояние (отмеченные категории), я бы порекомендовал вам вытащить состояние из компонента. Например, сохраните его в родительском компоненте и передайте в качестве подпорки дочерним компонентам. Или используйте государственную библиотеку, такую ​​как Redux. Вы также можете использовать контекст реагирования для управления общим состоянием.