Question

将对象传递到可重复使用的视图获取错误：null不是对象（评估...）

2018-03-24

127

javascript reactjs react-native

i创建一个正在从服务器获取数据的组件，然后在屏幕上显示数据。

在那之后，屏幕看起来不错。

，我对代码进行了重构，以使其通过将代码段移动到新组件（ twogroupoupitemsview >）使其可重复使用。）：

697155449

我总是得到：

338184270

在评估' this.state.items '。

您可以向我展示创建自己可重复使用的视图的方式吗？

Answer 1

您的状态是异步设置的。请尝试在 Promise 解析之前显式初始化它。以下是一些可能性。

声明初始状态：

export class MainComponent extends Component {

  state = {
    isLoading: true, // sample values
    items: null 
  }

或者在构造函数中设置：

export class MainComponent extends Component {

  constructor(props) {
    super(props);
    this.state = {
      isLoading: true, // sample values
      items: null 
    };
 }

或者加强保护：

render() {
     return (
       <View>
         <View>
            {
              this.state && this.state.items != null &&
              <TwoGroupItemsView title={'Group 1'} items={this.state && this.state.items}/>
            }
          </View>
       </View>
     );
   }

Answer 2

重新编写你的渲染函数。

 render() {
     return (
       <View>
         <View>
            {
              this.state.items ? 
              <TwoGroupItemsView title={'Group 1'} items={this.state.items}/> : null
            }
          </View>
       </View>
     );
   }