反应：未捕获类型错误：无法读取未定义的属性“状态”答案

【问题标题】：react: uncaught TypeError: Cannot read property 'state' of undefined反应：未捕获类型错误：无法读取未定义的属性“状态”
【发布时间】：2023-03-21 06:35:01
【问题描述】：

我试图从通用类中获取函数应用程序中的“状态”对象，我收到此错误“未捕获的类型错误：无法读取未定义的属性“状态””。代码是

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

【问题讨论】：

每个问题问一个问题，而不是三个。
纯功能组件中没有状态。从表面上看，它甚至没有意义。在您的 Application 组件中没有其他对状态的引用。你的意思是把它传递给某个地方的Application？
现在我明白了。我已经得到答案，但感谢您重播。

标签： javascript reactjs web-deployment

【解决方案1】：

应用程序是无状态组件。并不是说箭头函数具有上下文的词汇范围。

为无状态组件使用 props。

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>
  }
}

【讨论】：

【解决方案2】：

几件事：

*Stateless Functional Components 没有state、lifecycle 方法和this 关键字。

*您需要连接General和Application组件，以便Application组件可以获取通用component的state值。

*将Application组件设为General组件的子组件，并在props中传递cmets值，在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'));

<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】：

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

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

import React from 'react';

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

export default ImageList;

你会得到同样的错误。想象一下，我正在尝试将状态从您的 General 基于类的组件访问到上面的 ImageList 组件中，并且我确实将它导入到 General，它会给我同样的错误，因为我没有通过 props作为 ImageList 功能组件的参数。

【讨论】：