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

我创建了一个从服务器获取数据的组件，然后在屏幕上显示数据。当我直接使用react本机视图时，屏幕看起来不错

之后，我将代码片段移动到新组件（

TwoGroupItemsView

）中，重构代码以使其可重用：

导出类MainComponent扩展组件{
componentDidMount（）{
返回获取（'https://mycompany.com/items')
.then（res=>res.json（））
。然后（json=>{
这是我的国家({
孤岛加载：false，
项目：json.data，
}，函数（）{
});
}
}
render（）{
返回(
{
this.state.items！=null&&
}
);
}
}
类TwoGroupItemsView扩展了视图{
建造师（道具）{
超级（道具）；
}
render（）{
返回(
//…项数组的平面列表
)
}
}

我总是得到：

TypeError:null不是对象 计算“

此.state.items

”时

---

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

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

宣布初始状态：

导出类MainComponent扩展组件{
状态={
isLoading:true，//示例值
项目：空
}

或构造函数中的设置：

导出类MainComponent扩展组件{
建造师（道具）{
超级（道具）；
此.state={
isLoading:true，//示例值
项目：空
};
}

或者加强警卫：

render（）{
返回(
{
this.state&&this.state.items！=null&&
}
);
}

重新编写渲染函数

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

render（）{
返回(
{
这个.状态.项目？
：null
}
);
}

显示部件

组件didmount（）{/…获取数据，然后存储到this.state.items}

。可能存在错误。我已经添加了componentDidMount的一部分。您能解释一下吗？如果我使用react native的普通视图，而不是创建自己的视图，它会正常工作。@R.Kaka您能用控制台记录您从API得到的响应吗！，另一点，为什么您要在TwoGroupItem中扩展视图而不是组件sView？@R.Kaka请使用以下命令重试：

async componentDidMount（）{

我尝试在构造函数或componentDidMount上初始化。但错误仍然发生。堆栈跟踪显示将项传递给TwoGroupItemsView时出错。即使设置了

项：null

？因为这不应呈现

TwoGroupItemsView

。是的，甚至设置项：null。它总是发生在项={this.state.items}上。但是你可以看到，我已经检查了null。state.items！=null&&我已经更新了答案。我已经尝试了所有三种可能性，它们在使用你的代码的模拟中对我有效。希望其中一种对你有效。我想说谢谢你的帮助。我已经找出了问题所在。一切都应该会顺利，我们所做的在这里显示。是的！当我重构代码时，我没有将一些state.items替换为props.items。它在我自己的视图中正确地发出，而不是像react native stack trace显示的那样传递数据错误。

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