Question

我有一个构造函数突然停止工作，不知道为什么。

我有这个数据。如果您在第24行看到此内容，它会被读出并实际上返回包括道具在内的各种物品。但是，当我尝试写入状态后的1行，它将返回此错误。我不知道为什么，因为这里没有什么可绑定的，并且在某个时候它还在工作。

TypeError: Cannot read property 'state' of undefined
 23 | super(props);
 24 | console.log(this)
 25 | 
 26 | this.state = {
    | ^  27 |   loading: true,
 28 |   ...props.location.state,
 29 |   review: props.review,

import React, { Component } from 'react';

import { withFirebase } from '../Firebase';
import { AuthUserContext } from '../Session';

import { needsEmailVerification } from '../Session/withEmailVerification.js'

import NewCommentReactionPage from '../Comments/newReaction.js'
import NewReviewFeedbackPage from '../Comments/new.js'
import RequireEmailComponent from '../Errors/requireEmail.js'

const ReviewFeedbackPage = (props) => (
  <AuthUserContext.Consumer>
    {authUser => (
        <ReviewFeedbackMain authUser={authUser} isLoggedIn={condition(authUser)} needEmail={needsEmailVerification(authUser)} {...props} />
    )}
  </AuthUserContext.Consumer>
);

class ReviewFeedbackBase extends Component {
  constructor(props) {
    super(props);

    this.state = {
      loading: true,
      ...props.location.state,
      review: props.review,
      newComment: '',
      comments: [],
      reactions: props.review ? props.review.count ? props.review.count.reactions ?  props.review.count.reactions : {} : {} : {}
    };

    this.reactionAdded = this.reactionAdded.bind(this)
    this.commentAdded = this.commentAdded.bind(this)
  }


  componentDidMount() {
    ...  
  }

  componentDidUpdate(prevProps, prevState) {
    ...
  }


  commentAdded(newComment){
 ...
 }

  render() {
    const { review, comments, reactions } = this.state;
    const { isLoggedIn, needsEmail } = this.props;
    return (
      <div>
       ....
        }
        {isLoggedIn && needsEmail && <RequireEmailComponent toAction={{text: 'to react'}} />}
        {isLoggedIn && !needsEmail &&
          <div>
            <NewCommentReactionPage review={review} reactionAdded={this.reactionAdded} />
            <NewReviewFeedbackPage review={review} commentAdded={this.commentAdded} />
          </div>
        }


      </div>
    );
  }
}

const ReviewFeedbackMain = withFirebase(ReviewFeedbackBase);

const condition = authUser => !!authUser;
export default ReviewFeedbackPage;

Answer 1

在您的代码中，您有2个state：

this.state = {  // declaring state
  loading: true,
  ...props.location.state,  // referencing the state of ...props.location
  review: props.review,
  newComment: '',
  comments: [],
  reactions: props.review ? props.review.count ? props.review.count.reactions ?  props.review.count.reactions : {} : {} : {}
};

由于props.location为undefined，并且您正尝试从其中访问state，因此收到此错误。

第26行出现错误，因为它无法声明变量。

26 | this.state = {
   | ^  27 |   loading: true,

在构造函数中不是问题，但是在...props.location.state中。

现在您知道问题出在哪里，您需要查看要执行的操作。

也许在传播props.location.state之前要进行一些检查？由你决定。

为什么我收到无法读取未定义的属性“状态”？

1 个答案: