将对象传递给可重用视图获取错误：null不是对象（正在评估...）

Question

我创建了一个组件，它从服务器获取数据，然后在屏幕上显示数据。当我直接使用react-native视图时，屏幕看起来很好。

之后，我通过将一段代码移动到新组件（TwoGroupItemsView）重构代码以使其可重用：

export class MainComponent extends Component {
   componentDidMount() {
     return fetch('https://mycompany.com/items')
      .then(res => res.json())
      .then(json => {
        this.setState({
            isLoading: false,
            items: json.data,
        }, function(){

        });
      }
   }

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

class TwoGroupItemsView extends View {

  constructor(props) {
    super(props);
  }

  render() {

    return (
      <View style={{marginTop: 16}}>
        //... FlatList for items array
      </View>
    )
  }
}

我总是得到：

  

TypeError：null不是对象

评估＆＃39; this.state.items＆＃39;。

您能告诉我创建自己的可重用视图的方法吗？

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