如何从存储更新 React Native 功能组件状态

Question

我有这个组件试图使用从存储加载的对象设置其状态：

import React from "react";
import { ReactElement } from "react-native/node_modules/@types/react";
import { useState } from "react";
import { Text, View } from "react-native";
import MyClass from "./MyClass";
import AsyncStorage from "@react-native-async-storage/async-storage";

export default function FunCompWithState(): ReactElement {
  const [myClass, setMyClass] = useState<MyClass>(new MyClass());

  const promised = loadFromStorage();

  // I've also try calling this in a useEffect()
  promised.then(c => setMyClass(c));

  return (
    <View>
      <Text>{myClass.getTitle()}</Text>
      <Text>{myClass.getValue()}</Text>
    </View>
  );
}

async function loadFromStorage(): Promise<MyClass | null> {
  const jsonValue = await AsyncStorage.getItem("@main.myClass");
  console.log(jsonValue);
  if (jsonValue != null) {
    return Promise.resolve(JSON.parse(jsonValue));
  }
  return Promise.resolve(null);
}

在我的测试中，这就是我所得到的：

import * as React from "react";
import { act, render } from "@testing-library/react-native";
import FunCompWithState from "../FunCompWithState";
import MyClass from "../MyClass";
import AsyncStorage from "@react-native-async-storage/async-storage";

async function setup() {
    const storedClass = new MyClass();
    storedClass.setTitle("Stored Class");
    storedClass.setValue(8);
    await AsyncStorage.setItem("@main.myClass", JSON.stringify(storedClass));
}

it("Render FunCompWithState", () => {
  act(() => {
      setup();
  });

  const { debug } = render(<FunCompWithState />);
  debug();
});

当我运行我的测试时，我放置在loadFromStorage函数中的console.log(jsonValue)输出正确的值： {"title":"Stored Class","value":8} 。 但是，呈现的组件似乎没有正确的值：

    <View>
      <Text>

      </Text>
      <Text>
        1
      </Text>
    </View>

我希望看到这个：

    <View>
      <Text>
        Stored Class
      </Text>
      <Text>
        8
      </Text>
    </View>

那么我怎样才能在渲染的组件中获得正确的值呢？ 这是我更新组件状态的方式的问题还是我测试组件的方式的问题？

Answer 1

为什么你需要在这里使用 promise ？ 看起来应该更复杂。 如果您的 getAsyncItem 不为 null ，您就不能在您的函数中使用 setState 吗？

  async function loadFromStorage() {
    const jsonValue = await AsyncStorage.getItem("@main.myClass");
    console.log(jsonValue);
    if (jsonValue != null) {
      setMyClass(JSON.parse(jsonValue));
    }
  }