Question

TypeError：无法设置未定义或空引用的属性“props”-反应原生组件

2020-02-10

296

javascript reactjs react-native

我是 React Native 的新手。我检查了一下，我的代码很好，我正在学习有关组件的知识，但仍然出现 props 错误，即使在使用 props 组件的 React Native 文档中也是如此，但为什么仍然出现错误，请检查文档链接 ( https://facebook.github.io/react-native/docs/props )

    import React, {Component} from 'react';
    import { StyleSheet, Text, View } from 'react-native';

    class UserInformation extends Component(){
      render(){
        return(
          <View>
            <Text>{this.props.Name}</Text>
            <Text>{this.props.Status}</Text>
          </View>
        );
      }

}

function App() {

  return (
    <View style={styles.container}>

       <UserInformation Name='Hamza' Status='Single' />
       <UserInformation Name='Shahwar' Status='Comitted' />
    </View>
  );
}

export default App;

错误：TypeError：无法设置未定义或空引用的属性“props”

Answer 1

您无法 扩展 功能组件。相反，在我看来，这是一个拼写错误：

class UserInformation extends Component{
                            //--------^^-------remove ()

Answer 2

如果您使用的是 Class Component，则需要将

class UserInformation extends Component(){

更改为

class UserInformation extends React.Component{

并添加

constructor(props) {
 super(props) // <---- this is the part which give you this.props
}

但是...我建议您使用类似 App() 的函数组件

const UserInformation = (props) => {
        return(
          <View>
            <Text>{props.Name}</Text>
            <Text>{props.Status}</Text>
          </View>
        );
}