OnPress State 通过 AsyncStorage 更新屏幕不会重新渲染答案

【问题标题】：OnPress State update via AsyncStorage the screen is not re-renderingOnPress State 通过 AsyncStorage 更新屏幕不会重新渲染
【发布时间】：2021-04-02 09:25:19
【问题描述】：

我在Home.js 文件中的setItem 为：

    AsyncStorage.setItem('myValue', JSON.stringify(3))

现在在另一个名为 Ask.js 的文件中，我有一个按钮：

    const [val, setVal] = useState("1");
...
            <TouchableOpacity onPress={() => {
                AsyncStorage.getItem("myValue").then((value) => {
                    setVal(value)
                    console.log(value + ' and ' + val)
                });
            }}>

基于console.log 按下此按钮时，它会记录1 and 3，这似乎值未更新，但如果我再次按下它，它将打印3 and 3，这意味着useState 值已更新但它没有重新渲染。

那么我该如何重新渲染呢？

【问题讨论】：

-> setValue(value)，你没有使用setter。
什么是 val(value)？我认为应该是 setVal(value)。
@Konstantin 这是一种类型...刚刚修复它...它仍然不起作用
@ZenoDallaValle 是的，这是一个错字。但。即使修复它仍然不会重新渲染
我相信你可以尝试使用await AsyncStorage.setItem。您应该检查您的本地存储，看看您的值是否已更新。

标签： react-native asyncstorage

【解决方案1】：

问题是：您没有使用 setVal 来更新值。应该是这样的。

 <TouchableOpacity onPress={() => {
                AsyncStorage.getItem("myValue").then((value) => {
                    setVal(value)
                    console.log(value + ' and ' + val)
                });
            }}>

【讨论】：

val(value) 是一个错字。我编辑了它，但它仍然不起作用。喜欢它会更新值，但不会重新渲染。

【解决方案2】：

我试图复制你的例子。我在 react-native 中创建了这个 sandbox。对我来说工作正常。

编辑 1：

按下此按钮时，它会记录 1 和 3，这似乎是值没有更新

这是因为状态挂钩的异步特性（请参阅this question）。这是正常的。

您没有发布您希望看到 val 变化的代码，我猜问题就在那里。

【讨论】：