每当我尝试改变状态时,我都会收到上述错误 . 我想做什么:
-
显示初始屏幕
-
了解相关数据
-
将此数据委托给负责从给定源输出的子组件(mvc体系结构中的视图)
在我的构造函数中,我初始化状态就像
this.state = { items: null, mode: 'folders', modalChild: null,
contextView: null, // if path is set in prop, trigger update
isMounted:true,
};
componentWillUnmount() {
this.setState({isMounted: false});
}
在将错误源跟踪到之前在以下生命周期钩子中的setState调用之后,我将其拉出到两个抽象中,如下所示:
componentDidMount() {
DB.Folders.get_all(({rows, totalrows}) => {
if(!this.props.deepLink) this.showFolders(rows, totalrows);
else this.burrow();
});
}
这是我不认为是同谋的 render
方法
render() {
var afterMount = [
this.state.contextView,
this.props.navigation.state.params.headerText]
.every(e => e !== null && e !== void(0)), modal = this.state.modalChild;
if (afterMount) {
return <FolderComp
formattedComponents={this.state.contextView}
modalChild={modal}
headerTitle=<Text key='ht'>{this.props.navigation.state.params.headerText}</Text>
/>;
}
else return <View key='ct'></View>;/*loading animation here */
}
我添加了 isMounted
涂层,因为我从另一个答案中看到它有助于解决问题 .
showFolders (rows, totalrows) {
if (this.state.isMounted) {
if (!totalrows) {
console.log(this.setState);
this.setState({ items: [], contextView: <Text key='ct'>no folders to show</Text>}); // I OMIT THIS AND THE TEMPEST CEASES
}
else {
this.setState({ items: rows, contextView: rows.map((obj,ind) =>
<Icon
title={obj.folderName}
name='md-folder'
style={styles.folders}
onPress={this.setState({mode: 'verses', context: ind})}
/>
)
});
}
}
}
我在 FolderComp
有一个console.log . 输出顺序如下:
-
<View key='ct'></View>
并触发componentDidMount
-
console.log(this.setState);
-
FolderComp
内的日志 -
两个不同的错误实例,包含消息"TypeError: Cannot read property 'null' of null"
我认为错误是我传递给setState的每个键,但它们不是 . 我通过3三,得到了相同的结果 .
什么可以负责这两个空检查?什么是空对象React Native试图从中获取null属性?有没有办法在setState异步完成时将渲染入队?我尝试使用async / await修饰符返回 this.setState({ items: [], contextView: <Text key='ct'>no folders to show</Text>}, () => this.render());
,但似乎我不能逃脱
async componentDidMount() {
DB.Folders.get_all(({rows, totalrows}) => {
if(!this.props.deepLink) await this.showFolders(rows, totalrows);
....
堆栈跟踪起泡
TheCurrentComponent (at SceneView.js:9)
in SceneView (at StackViewLayout.js:774)
in RCTView (at View.js:45)
in AnimatedComponent (at StackViewCard.js:69)
in RCTView (at View.js:45)
in AnimatedComponent (at screens.native.js:58)
in Screen (at StackViewCard.js:57)
in Card (at createPointerEventsContainer.js:27)
in Container (at StackViewLayout.js:831)
in RCTView (at View.js:45)
in ScreenContainer (at StackViewLayout.js:300)
in RCTView (at View.js:45)
in AnimatedComponent (at StackViewLayout.js:298)
in Handler (at StackViewLayout.js:279)
in StackViewLayout (at withOrientation.js:30)
in withOrientation (at StackView.js:96)
in RCTView (at View.js:45)
in Transitioner (at StackView.js:22)
in StackView (at createNavigator.js:62)
in Navigator (at createKeyboardAwareNavigator.js:12)
in KeyboardAwareNavigator (at createAppContainer.js:388)
in NavigationContainer (at renderApplication.js:34)
in RCTView (at View.js:45)
in RCTView (at View.js:45)
in AppContainer (at renderApplication.js:33)
非常感谢 .