React Tutorial: TypeError: Невозможно прочитать "реквизиты" свойств undefined

Я решил изучить React и начал с официального урока. Все хорошо, пока я не дохожу до такого состояния моего кода:

var CommentBox = React.createClass({
  render: () => {
    return (
      <div className="commentBox">
        <h1> Comments </h1>
        <CommentList />
        <CommentForm />
      </div>
    );
  }
});

var CommentForm = React.createClass({
  render: () => {
    return (
      <div className="commentForm">
        Hello, world! I am a comment form;
      </div>
    );
  }
});

var Comment = React.createClass({
  rawMarkup: () => {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render: () => {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2> // <--- [[[[[[ ERROR IS HERE ]]]]]]
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </div>
    );
  }
});

var CommentList = React.createClass({
  render: () => {
    return (
      <div className="commentList">
        <Comment author="Pete Hunt">This is one comment</Comment>
        <Comment author="Jordan Walke">This is *another* comment yo</Comment>
      </div>
    );
  }
});

ReactDOM.render(
  <CommentBox />,
  document.getElementById('content')
);

Когда я пытаюсь запустить его, я получаю следующую ошибку в devtools:

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

... и отладчик делает паузу в отмеченной строке (см. код). Когда я наведите курсор на this в {this.props.author}, я получу предварительный просмотр объекта, который имеет свойство props и все...

Ответ 1

Использовать декларацию функции (render() {} или render: function {}) вместо функции стрелки render: () => {}

var Comment = React.createClass({
  rawMarkup() {
    var rawMarkup = marked(this.props.children.toString(), {sanitize: true});
    return {__html: rawMarkup};
  },

  render() {
    return (
      <div className="comment">
        <h2 className="commentAuthor">
          {this.props.author}
        </h2>
        <span dangerouslySetInnerHtml={this.rawMarkup} />
      </div>
    );
  }
});

Example

An arrow function выражение имеет более короткий синтаксис по сравнению с выражением функции и лексически связывает это значение (не связывает его это, аргументы, супер или new.target). Функции стрелок всегда анонимны.

Ответ 2

У меня было то же сообщение об ошибке:

Невозможно прочитать свойство 'props' из неопределенного

... но по другой причине: когда this вызывается из функции, javascript не может получить доступ к переменной, потому что this находится во внешней области видимости. (Примечание: я был в ES5)

В этом случае просто сохраните this в другой переменной перед функцией (в области действия вашего компонента): var that = this;

Тогда вы сможете вызывать that.props из функции.

Надеюсь, это поможет другим людям, у которых было это сообщение об ошибке.

Подробный пример ниже:

render: function() {
  var steps = [];
  var that = this;  // store the reference for later use
  var count = 0;
  this.props.steps.forEach(function(step) {
      steps.push(<Step myFunction={function(){that.props.anotherFunction(count)}}/>);  // here you are
      count += 1;
  });
  return (
    <div>{steps}</div>
  )
}

Ответ 3

Немного поздний пост/ответ.

Попробуйте связать свою функцию внутри конструктора

пример:

this.yourfunction = this.yourfunction.bind(this);

Ответ 4

Я на ES6 и функция стрелки сделала свое дело: rawMarkup =() => {}

Ответ 5

In my case Brion answer helped me got past this error.

Я до сих пор не уверен, почему это не сработало, и выдал ошибку "Uncaught (в обещании) TypeError: Невозможно прочитать свойство 'props' из undefined at eval"

Не работает:-

onSubmit(e){
        console.log('Component LoginDetailsComponent --> onSubmit() ...');
        e.preventDefault();
         loginSchema.isValid({userName:this.state.userName,password:this.state.password})
         .then(function(valid){
            console.log('valid result: ',valid);
             if(valid){
             console.log('Validation successful')
             props.history.push("/home");
             }
             else
             console.log('Validation Failed...')
         });
        console.log('After Validation: ');

    }

    Working:-




onSubmit(e){
            console.log('Component LoginDetailsComponent --> onSubmit() ...');
            e.preventDefault();
             loginSchema.isValid({userName:this.state.userName,password:this.state.password})
             .then((valid)=>{
                console.log('valid result: ',valid);
                 if(valid){
                 console.log('Validation successful')
                 this.props.history.push("/home");
                 }
                 else
                 console.log('Validation Failed...')
             });
            console.log('After Validation: ');

        }