列表渲染之前的 AsyncStorage React Native

Question

我有一个应用程序可以列出动物慈善机构的事件。

登录后，ong被定向到您的事件列表，所以我必须通过您的登录页面ID才能加载此列表。

我正在尝试在一个函数中加载 AsyncStorage 的变量，然后将其传递给一个在 React 中加载事件列表的回调 useEffect。

代码：

export default function Incidents() {
  const [incidents, setIncidents] = useState([]);
  const [total, setTotal] = useState(0);
  const [page, setPage] = useState(1);
  const [loading, setLoading] = useState(false);
  const [id, setID] = useState('');
  const [name, setName] = useState('');

加载存储：

loadStorage = async function(callback) {
    
    try {
      const ongid = await AsyncStorage.getItem('ongID');
      const ongname = await AsyncStorage.getItem('ongName');

      if (ongid && ongname !== null) {
        setID(ongid);
        setName(ongname);
        
      }
    } catch (e) {
      alert(e);
    }

    callback();
  }

加载事件：

loadIncidents = async function() {

    if (loading) {
      return;
    }

    if (total > 0 && incidents.lenght === total) {
      return;
    }

    try {
      const response = await api.get('profiles', {
        headers: {
          Authorization: id,
        },
        params: { page },
      });
  
      setIncidents([ ... incidents, ... response.data]);
      setTotal(response.headers['x-total-count']);
      setPage(page +1);
      setLoading(false);

    } catch (e) {
      alert(e); //When i access the incident list page i got the error: 'Error: Request failed with status code 400'
    }  
  }

使用效果：

useEffect(() => {
    navigation.addListener('focus', () => {
      loadStorage(loadIncidents);
    });
  }, []);

loadIncidents 的 alert (e) 行中的错误发生是因为 useEffect 在我第一次进入应用程序时没有完全调用 loadStorage (loadIncidents) 部分。

我有另一个名为 newIncident 的页面，如果我在此错误上按确定后导航到该页面并返回事件列表页面（按 navite.goBack ()），该列表将加载来自已记录 ONG。

当我第一次进入列出 ONG 事件的页面时需要此行为。由于这两种方法都是异步的，我不知道该怎么做。

Answer 1

也许你可以考虑使用react-native-easy-app。完成初始绑定后，可以让你以赋值赋值的方式同步访问AsyncStorage中的属性，因为足够简单，所以你不会出现上面的各种问题。

Answer 2

是否使用了 promises。代码如下：

async function loadStorage() {
    var ongid = '';
    var ongname = '';

    try {
      ongid = await AsyncStorage.getItem('ongID');
      ongname = await AsyncStorage.getItem('ongName');

    } catch (e) {
      alert(e);
    }

    return new Promise((resolve, reject) => {

      if (ongid !== null) {
        setID(ongid);
        setName(ongname);
        const ong = { 'name': ongname, 'id': ongid}

        return resolve(ong);
      }
    })
  }

然后在useEffect中加载信息是这样的：

loadStorage()
 .then(loadIncidents)

列表渲染之前的 AsyncStorage React Native

AsyncStorage before list render React Native

node.js

react-native

use-effect

asyncstorage