Question

我正在做一个简单的饮酒游戏。显示纸牌时，其下方显示相应的规则。我在其中有规则的settings.js文件中，用户可以查看和修改规则，并且它们会在game.js文件上更新。我正在使用异步存储来存储规则。

我想在settings.js文件中添加一个按钮，该按钮在按下时将返回原始规则。唯一的问题是，原始规则不会在设置屏幕上立即更新。按下该按钮时，原始规则确实会在游戏上更新，但是只有当用户返回游戏然后又回到设置屏幕时，它们才会在设置屏幕上更新。

用于更新规则的代码：

initialState = async () => {
    try {
        await AsyncStorage.setItem('rule1', 'theoriginalrule1')
        ...
        await AsyncStorage.setItem('rule13', 'theoriginalrule13')
    catch(err) {
        console.log(err)
        }
}

我有以下代码行可以在进入屏幕时更新异步存储，但是如上所述，它仅在重新进入屏幕时才有效：

componentDidMount() {
const { navigation } = this.props;
this.focusListener = navigation.addListener('didFocus', () => {
    this.getData();
    });
}

Answer 1

要在这里回答您的问题，而不是在评论中。

尝试一下：

componentDidMount() {
const { navigation } = this.props;
this.getData();
this.focusListener = navigation.addListener('didFocus', () => {
    this.getData();
    });
}

Answer 2

我建议您使用，

状态驱动的用户界面

意味着您的ui仅在状态更改时才会更改，现在假设您正在使用

更改asyncStorage

await AsyncStorage.setItem('rule1', 'theoriginalrule1')

所以我建议您在更新aysncStorage之类的状态后也将更新。

//Initial state
this.state = { score: 0 };

async storeValues(){
    await AsyncStorage.setItem('rule1', 'theoriginalrule1')
    let newScoreValue = await AsyncStorage.getItem('rule1')
    this.setState({score:newScoreValue})
}

// UI will be like 

render(){
    return(<Text>{this.state.score}</Text>)
}

React Native，如何立即更新异步存储？

2 个答案: