Реагировать: uncaught TypeError: Невозможно прочитать свойство 'состояние' неопределенного

Question

Я пытаюсь получить объект 'state' в функции Application, которая отсутствует в классе General, и я получаю эту ошибку "Uncaught TypeError: Невозможно прочитать свойство 'state' of undefined". Код

class General extends Comment {
  constructor() {
    super();
    this.state = { comments: first_comment};
  }
}

const Application = () => {
  return (
    <div> Hello world beginner: {this.state.comments}</div>
  );
};

render(<Application/>, document.getElementById('container'));

Answer 1

Приложение является компонентом без сохранения состояния. Нельзя сказать, что функции стрелок имеют лексическое определение контекста.

Используйте реквизит для компонентов без сохранения состояния.

const Application = (props) => {
  return (
    <div> Hello world beginner: {props.comments}</div>
  );
};

Или расширить React.Component

class Application extends React.Component {
  constructor() {
     // init state
  }

  render() {
    return <div> Hello world beginner: {this.state.comments}</div>
  }
}

Answer 2

Несколько вещей:

* Stateless Functional Components не иметь state, lifecycle методы и this ключевое слово.

* Вам необходимо подключиться General а также Application компонент, так что Application компонент может вам state значение общего component,

*Делать Application компонент как дочерний компонент General и передать значение комментариев в props, И в Application получить доступ к значению props.comments,

Напишите это так:

class General extends Component {
  constructor() {
    super();
    this.state = { comments: first_comment};
  }
  render(){
     return (
        <div>
            <Application comments={this.state.comments}/>
        </div>
     )
  }
}

const Application = (props) => {
  return (
    <div> Hello world beginner: {props.comments}</div>
  );
};

render(<General/>, document.getElementById('container'));

Проверьте рабочий пример:

class General extends React.Component {
      constructor() {
        super();
        this.state = { comments: 'first_comment'};
      }
      render(){
         return (
            <div>
                <Application comments={this.state.comments}/>
            </div>
         )
      }
    }
    
    const Application = (props) => {
      return (
        <div> Hello world beginner: {props.comments}</div>
      );
    };
    
    ReactDOM.render(<General/>, document.getElementById('container'));

<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/15.1.0/react-dom.min.js"></script>

<div id='container'/>

Answer 3

В вашем компоненте класса вы должны расширять или создавать подклассы React.Component и когда вы это сделаете, это означает, что вы собираетесь переопределить constructor() функции React.Component занятия с одним из General компонент класса, но вы не хотите этого делать, вы все равно хотите получить доступ React.Componentconstructor() так что вам нужно пройти в props конструктору и super(),

Далее при передаче состояния в качестве реквизита функциональному компоненту необходимо передать props в качестве аргумента для функционального компонента, в противном случае, например, при этом:

import React from 'react';

const ImageList = () => {
  console.log(props.images);
  return <div>ImageList</div>;
};

export default ImageList;

вы получите ту же ошибку, что и вы. Представьте, что я пытаюсь получить доступ к состоянию из вашего General основанный на классе компонент в этом ImageList Компонент выше, и я импортировал его в General, это даст мне ту же ошибку, потому что я не прошел props в качестве аргумента ImageList функциональный компонент.