React TypeError：无法读取未定义的属性“props”

React TypeError: 无法读取未定义的属性 ‘props’

React TypeError: Cannot read property ‘props’ of undefined

当在没有将正确的上下文绑定到关键字的情况下调用类方法时，会发生“无法读取未定义的属性‘props’”错误this
。

要解决该错误，请将类方法定义为箭头函数或使用
bind类的构造方法中的方法。

反应无法读取未定义的属性道具

如果您在功能组件中遇到错误，请向下滚动到下一部分。

下面是错误如何发生的示例。

应用程序.js


import React, {Component} from 'react';

class App extends Component {
  logProps() {
    // ⛔️ Uncaught TypeError: Cannot read properties of undefined (reading 'props')
    console.log(this.props);
  }

  render() {
    return (
      <div>
        <button onClick={this.logProps}>Log props</button>
      </div>
    );
  }
}

export default App;

请注意，我们定义了logProps方法，但没有绑定this关键字的上下文。

因此，方法this中的关键字logProps的值为undefined。

使用箭头函数而不是命名函数

要解决该错误，请将logProps方法切换为使用箭头函数。

应用程序.js


import React, {Component} from 'react';

class App extends Component {
  // 👇️ now using arrow function
  logProps = () => {
    console.log(this.props);
  };

  render() {
    return (
      <div>
        <button onClick={this.logProps}>Log props</button>
      </div>
    );
  }
}

export default App;

这是可行的，因为箭头函数使用this封闭范围的关键字——在我们的示例中，封闭范围是特定的组件实例。

不要`this`在功能组件中使用关键字

如果您在功能组件中遇到错误，请确保您没有props使用this关键字进行访问，例如 use props.myPropinstead of
this.props.myProp。

应用程序.js


function Button(props) {
  return (
    <button onClick={() => console.log('button clicked')}>
      {props.text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Click" />
    </div>
  );
}

export default App;

请注意，该Button组件用于props.text访问text传递给它的道具。

解构你的道具

或者，您可以解构 prop 以不必在
props对象上访问它。

应用程序.js


function Button({text}) {
  return (
    <button onClick={() => console.log('button clicked')}>
      {text}
    </button>
  )
}

function App() {
  return (
    <div>
      <Button text="Click" />
    </div>
  );
}

export default App;

我们解构了对象text的属性props，因此Button
组件现在可以直接访问它。

您可以根据需要对尽可能多的道具执行此操作。

应用程序.js


function Button({text, disabled}) {
  return (
    <button disabled={disabled} onClick={() => console.log('button clicked')}>
      {text}
    </button>
  );
}

function App() {
  return (
    <div>
      <Button text="Click" disabled={false} />
    </div>
  );
}

export default App;