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

Question

I have a constructor that suddenly stopped working, can't figure out why.

I have this data. If you see at line 24, this is read out and actually returns various items including props. However 1 line later when I try to write to state, it returns this error. I can't figure out why as there's nothing to bind here and it was working at some point.

 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

In your code, you have 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 : {} : {} : {}
};

You are getting this error because props.location is undefined and you are trying to access state from it.

The error is in line 26 because it's not being able to declare the variable.

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

Not a problem in the constructor, but in the ...props.location.state .

Now that you know what is the problem, you need to see what you want to do.

Maybe do some checking before spreading props.location.state ? It's up to you.