使用 localstorage 在 React 或 React Native 中仅显示一次组件
Show component only once in React or React Native using localstorage
我遇到以下情况,我试图使用 localstorge 只显示一次屏幕组件。这个让我精神错乱。
App.js
...
constructor(props) {
super(props);
this.state = {
isLoading: false,
};
}
componentDidMount() {
if (AsyncStorage.getItem('key')) {
AsyncStorage.getItem('key', (value) => {
this.setState({isLoading: value})
Alert.alert(JSON.stringify(value))
});
AsyncStorage.setItem('key', JSON.stringify(true))
}
}
render() {
if (!this.state.isLoading) {
return <Search />
}
return <Root />
}
...
您需要稍微修改 componentDidMount
实现并向组件的状态添加另一个标志
constructor() {
...
this.state = {
isLoaded: false,
wasShown: false
}
}
componentDidMount() {
AsyncStorage.getItem('key') // get key
.then(wasShown => {
if(wasShown === null) { // first time
// we need to save key for the next time
AsyncStorage.setItem('key', '"true"')
}
this.setState({isLoaded: true, wasShown})
})
}
render() {
const { isLoaded, wasShown } = this.state
// you can't tell if this component was shown or not render nothing
if(!isLoaded) { return null }
if(!wasShown) {
return <Search />
}
return <Root/>
}
顺便说一句,如果你包含 async/await 对你的 babel 预设的支持,你可以使这段代码更简单
async componentDidMount() {
const wasShown = await AsyncStorage.getItem('key') // get key
if(wasShown === null) {
await AsyncStorage.setItem('key', '"true"')
}
this.setState({isLoaded: true, wasShown}
}
在检查存储的价值时显示其他内容。获得值后,只需设置状态并显示屏幕。换句话说,你应该在确定你还没有显示屏幕后才打开你的屏幕组件。
AsyncStorage.getItem('isShown').then((value) => {
if(value == null){
// Whatever you want to do just once.
AsyncStorage.setItem('isShown', 'sth');
}
});
我遇到以下情况,我试图使用 localstorge 只显示一次屏幕组件。这个让我精神错乱。
App.js
...
constructor(props) {
super(props);
this.state = {
isLoading: false,
};
}
componentDidMount() {
if (AsyncStorage.getItem('key')) {
AsyncStorage.getItem('key', (value) => {
this.setState({isLoading: value})
Alert.alert(JSON.stringify(value))
});
AsyncStorage.setItem('key', JSON.stringify(true))
}
}
render() {
if (!this.state.isLoading) {
return <Search />
}
return <Root />
}
...
您需要稍微修改 componentDidMount
实现并向组件的状态添加另一个标志
constructor() {
...
this.state = {
isLoaded: false,
wasShown: false
}
}
componentDidMount() {
AsyncStorage.getItem('key') // get key
.then(wasShown => {
if(wasShown === null) { // first time
// we need to save key for the next time
AsyncStorage.setItem('key', '"true"')
}
this.setState({isLoaded: true, wasShown})
})
}
render() {
const { isLoaded, wasShown } = this.state
// you can't tell if this component was shown or not render nothing
if(!isLoaded) { return null }
if(!wasShown) {
return <Search />
}
return <Root/>
}
顺便说一句,如果你包含 async/await 对你的 babel 预设的支持,你可以使这段代码更简单
async componentDidMount() {
const wasShown = await AsyncStorage.getItem('key') // get key
if(wasShown === null) {
await AsyncStorage.setItem('key', '"true"')
}
this.setState({isLoaded: true, wasShown}
}
在检查存储的价值时显示其他内容。获得值后,只需设置状态并显示屏幕。换句话说,你应该在确定你还没有显示屏幕后才打开你的屏幕组件。
AsyncStorage.getItem('isShown').then((value) => {
if(value == null){
// Whatever you want to do just once.
AsyncStorage.setItem('isShown', 'sth');
}
});