react: uncaught TypeError: Cannot read property 'state' of undefined

问题

I am trying to get 'state' object in function Application which is out from General class and I am getting this error "Uncaught TypeError: Cannot read property 'state' of undefined". The code is

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'));

回答1:

Application is stateless component. Not to say that arrow functions have lexical scoping of context.

Use props for stateless components.

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

Or extend React.Component

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

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

回答2:

Few Things:

*Stateless Functional Components don't have state, lifecycle methods, and this keyword.

*You need to connect General and Application component so that Application component can you the state value of General component.

*Make Application component as child of General component and pass the comments value in props, and in Application access the value by props.comments.

Write it like this:

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'));

Check the working example:

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'/>

回答3:

In your class component you should be extending or subclassing React.Component and when you do, that means you are going to be overriding the constructor() functions of React.Component classes with the one from General class-component, but you don't want to do that, you still want to access React.Component constructor() so you need to pass in props to the constructor and to super().

Next, when passing state as props to a functional component, you need to pass in props as an argument to the functional component, otherwise when doing this for example:

import React from 'react';

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

export default ImageList;

you will get that same error you got. Imagine I am trying to access state from your General class-based component into this ImageList component above and I do have it imported to General, it will give me the same error, because I have not passed props as an argument to ImageList functional component.

来源：https://stackoverflow.com/questions/43121520/react-uncaught-typeerror-cannot-read-property-state-of-undefined

标签

javascript

reactjs

web-deployment