AsyncStorage getItem 无法在抽屉内工作,反应本机路由器通量
AsyncStorage getItem not working within drawer with react native router flux
我正在尝试在我的抽屉中获取 AsyncStorage
中的值 component.I 已经完成条件渲染以显示 [=37= 中的 login
和 logout
按钮] 成功登录后,如果 AsynStorage
内有值,则抽屉内的按钮应为 Logout
而不是 Login
。但最初登录后打开抽屉时的值为 AsyncStorage
不是 getting.It 只有在我单击 drawer.So 中的特定项目时才会获取抽屉打开时如何获取抽屉中的值?我已经完成了以下操作
login.js
async saveItem(item, selectedValue) {
try {
await AsyncStorage.setItem(item, selectedValue);
} catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}
...
....
...
.then((response) => response.json())
.then((responseData) => {
this.setState({
login: responseData
})
if (responseData.status == true) {
this.saveItem('userdetail', responseData.token.access_token);
this.saveItem('userimage', responseData.user.avatar);
this.saveItem('user', responseData.user.name);
Actions.dashBoard();
this.setState({ isLoading: false });
} else {
....
}
drawer.js
componentDidMount() {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
console.log(this.state.name);
}
onPressList = (data, index) => {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
if (this.state.name) {
if (data.route == "profile")
Actions.profile();
...
....
...
}
}
render(){
return(
{this.state.name? (
<ListItem
button
noBorder
onPress={() => this.onPressLogout()}
>
<Text style={[styles.text, { textAlign: 'left' }]}>
Logout
</Text>
</ListItem>
) : (
<ListItem
button
noBorder
onPress={() => this.onPressLogin()}
>
<Text style={[styles.text, { textAlign: 'left' }]}>
Login
</Text>
</ListItem>) }
)
}
在每个列表项的抽屉中,我检查是否设置了 name
或 not.It 仅当 name
为 there.But 时才会导航,问题最初出在 componentDidMount
我没有在 AsyncStorage
中获取值。请帮我找到一个 solution.The 问题只存在于 bar.I 中获取值的 AsyncStorage
中另一个 screens.Please help.Any 帮助真的是 appreciable.Thank 你。
问题是您在将用户添加到异步存储之前检查用户。当您单击一个项目时它起作用的原因是因为每次单击列表项目时您都在检查用户。您可以使用 componentWillUpdate
而不是 componentDidMount
。我猜当你点击抽屉时它会更新组件然后检查用户(因为 React 重新渲染整个组件子树)。
希望对您有所帮助
componentWillUpdate() {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
console.log(this.state.name);
}
我正在尝试在我的抽屉中获取 AsyncStorage
中的值 component.I 已经完成条件渲染以显示 [=37= 中的 login
和 logout
按钮] 成功登录后,如果 AsynStorage
内有值,则抽屉内的按钮应为 Logout
而不是 Login
。但最初登录后打开抽屉时的值为 AsyncStorage
不是 getting.It 只有在我单击 drawer.So 中的特定项目时才会获取抽屉打开时如何获取抽屉中的值?我已经完成了以下操作
login.js
async saveItem(item, selectedValue) {
try {
await AsyncStorage.setItem(item, selectedValue);
} catch (error) {
console.error('AsyncStorage error: ' + error.message);
}
}
...
....
...
.then((response) => response.json())
.then((responseData) => {
this.setState({
login: responseData
})
if (responseData.status == true) {
this.saveItem('userdetail', responseData.token.access_token);
this.saveItem('userimage', responseData.user.avatar);
this.saveItem('user', responseData.user.name);
Actions.dashBoard();
this.setState({ isLoading: false });
} else {
....
}
drawer.js
componentDidMount() {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
console.log(this.state.name);
}
onPressList = (data, index) => {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
if (this.state.name) {
if (data.route == "profile")
Actions.profile();
...
....
...
}
}
render(){
return(
{this.state.name? (
<ListItem
button
noBorder
onPress={() => this.onPressLogout()}
>
<Text style={[styles.text, { textAlign: 'left' }]}>
Logout
</Text>
</ListItem>
) : (
<ListItem
button
noBorder
onPress={() => this.onPressLogin()}
>
<Text style={[styles.text, { textAlign: 'left' }]}>
Login
</Text>
</ListItem>) }
)
}
在每个列表项的抽屉中,我检查是否设置了 name
或 not.It 仅当 name
为 there.But 时才会导航,问题最初出在 componentDidMount
我没有在 AsyncStorage
中获取值。请帮我找到一个 solution.The 问题只存在于 bar.I 中获取值的 AsyncStorage
中另一个 screens.Please help.Any 帮助真的是 appreciable.Thank 你。
问题是您在将用户添加到异步存储之前检查用户。当您单击一个项目时它起作用的原因是因为每次单击列表项目时您都在检查用户。您可以使用 componentWillUpdate
而不是 componentDidMount
。我猜当你点击抽屉时它会更新组件然后检查用户(因为 React 重新渲染整个组件子树)。
希望对您有所帮助
componentWillUpdate() {
AsyncStorage.getItem("user").then(value => {
this.setState({ name: value })
})
console.log(this.state.name);
}