Question

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

    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，这意味着 { {1}} 值已更新，但未重新呈现。

那么我该如何重新渲染？

Answer 1

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

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

Answer 2

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

编辑 1：

<块引用>

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

这是因为状态钩子的异步特性（见this question）。很正常。

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

OnPress 状态通过 AsyncStorage 更新屏幕不会重新渲染

2 个答案: