Question

我试图在函数应用程序中获取'state'对象，它来自General类，我收到此错误“Uncaught TypeError：无法读取未定义的属性'状态'”。代码是

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的{{1}}值。

*将component组件设为常规组件的子组件，并在Application中传递评论值，并在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'));

Answer 3

在您的类组件中，您应该扩展或子类化React.Component，当这样做时，这意味着您将用{中的一个覆盖constructor()类的React.Component函数{1}}类组件，但是您不想这样做，您仍然想访问General React.Component，因此您需要将constructor()传递给构造函数和{ {1}}。

接下来，当将状态作为道具传递给功能组件时，您需要将props作为参数传递给功能组件，否则，例如：

super()

您将收到与您相同的错误。想象一下，我正在尝试从基于props的基于类的组件访问状态到上面的import React from 'react'; const ImageList = () => { console.log(props.images); return <div>ImageList</div>; }; export default ImageList;组件中，并且确实将其导入到General中，它将给我同样的错误，因为我尚未将ImageList作为General功能组件的参数传递。

react：uncaught TypeError：无法读取未定义的属性“state”

3 个答案: