嗨我有一个屏幕,我的条件为isProductTourCompleted
如果为真,那么我导航到Dashboard
屏幕。我正在尝试使用componentDidMount
API在AsyncStorage
方法中获取它的价值。我试图在componentWillMount
更新它,但没有运气。
如果是,则更新状态并重新渲染组件并导航到Dashboard
。它会打开Dashboard
屏幕,但会显示此警告。
我检查了几个有其他原因的线程。谁能暗示我做错了什么?
在React Native
中的现有状态转换(例如render
内)期间无法更新
export default class FirstProductTour extends Component {
constructor(props) {
super(props);
this._startDashboardScreen = this._startDashboardScreen.bind(this);
this.state = {
isProductTourCompleted: false
};
}
componentDidMount() {
AsyncStorage.getItem("@ProductTour:key").then(value => {
if (value)
this.setState({
isProductTourCompleted: true
});
});
}
render() {
const { navigate } = this.props.navigation;
return (
<View style={styles.container}>
{this.state.isProductTourCompleted
? this._startDashboardScreen()
: <View style={styles.container}>
<Image source={require("../../img/talk_people.png")} />
<Text style={styles.centerAlignTextStyle}>
{strings.talk_people}
</Text>
<RoundButton
robotoThinStyle={styles.roundButtonStyle}
centerAlignTextStyle={styles.whiteColorStyle}
onPress={() => {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: "SecondProductTour"
})
]
});
this.props.navigation.dispatch(resetAction);
}}
>
{strings.continueText}
</RoundButton>
</View>}
</View>
);
}
_startDashboardScreen() {
const resetAction = NavigationActions.reset({
index: 0,
actions: [
NavigationActions.navigate({
routeName: "Dashboard"
})
]
});
this.props.navigation.dispatch(resetAction);
}
}
答案 0 :(得分:3)
您需要检查是在函数上还是从单独的容器导航到FirstProductTour或DashPage。
在内部,React使用了几种巧妙的技术来最小化更新UI所需的昂贵DOM操作的数量 在
componentDidMount
中设置状态只会触发频繁的重新渲染,从而导致性能优化不佳。即使道具没有改变,组件也会重新渲染。
最佳解决方案:使用容器组件(或类似ButtonClick的功能)执行标准检查并确定导航。
另一个解决方案将检查条件并在componentwillMount
上调用导航功能。类似下面的内容
componentDidMount() {
AsyncStorage.getItem("@ProductTour:key").then(value => {
if (value)
this._startDashboardScreen()
});
}