Последний элемент AsyncCallback исчезает в React Native - PullRequest
Новая
       45

Последний элемент AsyncCallback исчезает в React Native

0 голосов
/ 13 апреля 2020

У меня есть массив объектов, и эти данные должны быть сохранены при добавлении нового элемента в список. Кроме того, когда приложение загружается, эта информация должна быть возвращена в список. Итак, я использую AsyncCallback, но он не работает должным образом. При обновлении приложения sh все сохраненные элементы появляются в списке, кроме последнего. Как я могу вернуть этот товар обратно в список? 

import React, { useState, useEffect } from 'react';
import { StyleSheet, View, Text, FlatList, Button, AsyncStorage } from 'react-native';

export default function HomeScreen() {

  const [listItems, setListItems] = useState([
  {
    // example list item
    id: '0',
    text: 'Item 1'
  },
  ]);
  const [idx, incrIdx] = useState(1);

  useEffect(() => {
    getData();
  }, []);


  const pushItem = () => {
    var data = new Object();
    data.id = idx.toString();
    data.text = "Item " + idx;
    setListItems([...listItems, data]);
    incrIdx(idx + 1);
    storeData();
  };

  const storeData = async () => {
      await AsyncStorage.setItem('listItems', JSON.stringify(listItems));
  };

  const getData = async () => {
    const value = await AsyncStorage.getItem('listItems');
    if(value !== null) {
      setListItems([...listItems, JSON.parse(value)]);
    }
  };

  return (
    <View style={styles.container}>
      <FlatList
          data={listItems}
          renderItem={({item}) => 
            <View>
              <Text>{item.text}</Text>
            </View>
          }
          keyExtractor={item => item.id}
      />
      <Button
        title="Push data"
        onPress={pushItem}
      />
    </View>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff',
  },
});

1 Ответ

0 голосов
/ 13 апреля 2020

Вы смотрели на то, что на самом деле устанавливает AsyncStorage.setItem?

Я предполагаю, что он не использует последнее состояние listItems, потому что установщики хуков асинхронны (как старый setState).

Для express logi c, которые должны вступить в силу при обновлении состояния, используйте useEffect api. 

useEffect(() => {
  // Instead of calling storeData() with stale state
  AsyncStorage.setItem('listItems', JSON.stringify(listItems));
}, [listItems]);
...