Как обновить экран в React Native внутри функции?

Я хочу иметь возможность удалять элементы из своего FlatList. Я не мог сделать это с помощью onPress для TouchableOpacity в ItemView, поэтому я решил создать кнопку с onPress = {botClick}, поэтому, когда я заполняю TextInput над этой кнопкой, он стирает этот элемент из AsyncStorage, а затем элемент также удалено из проддата. Моя проблема в том, что чтобы увидеть удаление этого элемента из FlatList, мне нужно сменить свой экран навигации на другой и вернуться, чтобы увидеть отраженные изменения. Могу ли я поместить что-то в botClick (), которое обновляет или перезаряжает экран при вызове функции, чтобы увидеть изменения автоматически, не меняя экраны?

export default function TestScreen () {

    const [proddata, setProddata] = useState([]);
    const [deletepar, setDeletepar] = useState('');


    const whenClick = () => {
      console.log("hello");
    }

    async function botClick(){

      try {
        await AsyncStorage.removeItem(deletepar);
        console.log("Removed");
        //Add something here that refreshes or recharges the screen
      }
      catch(exception) {
      }

    };

    const ItemView = ({item}) => {
      return (
        <TouchableOpacity onPress={whenClick}>
          <View>
            <Text>
              {item[0]+ '  ' + item[1]}
            </Text>
          </View>
        </TouchableOpacity>
      );
    };

    async function carInState() { 
      const keys = await AsyncStorage.getAllKeys();  
      const result = await AsyncStorage.multiGet(keys);  
      setProddata([...proddata, ...result]);
    }


    useFocusEffect(
      React.useCallback(() => {
          carInState();        
      }, [])
    );


    return (
      <View>
        <View>
          <TextInput placeholder="..." onChangeText={(val) => setDeletepar(val)}/>
          <View>
            <Button title="Delete" onPress={botClick}/>
          </View>
        </View>
        <FlatList
        data={proddata}
        renderItem={ItemView}
        keyExtractor={(item, index) => index.toString()}
        />

      </View>
    );
};

person knownothingjonsnow    schedule 17.11.2020    source источник


Ответы (1)


Это не проблема: вы можете манипулировать состоянием напрямую или заново получать все данные.

  async function botClick() {
    try {
      await AsyncStorage.removeItem(deletepar);

      // 1) Variant load data again & invoke setProddata
      const keys = await AsyncStorage.getAllKeys();
      const result = await AsyncStorage.multiGet(keys);
      setProddata([...result]);


      // 2) Or you can remove it from you list
      setProddata(prevProddata => prevProddata.filter(value => value.x.x.x !== deletepar))
    } catch (exception) {}
  }
person DAVID _    schedule 17.11.2020
comment
Сработало отлично. Огромное спасибо !! - person knownothingjonsnow; 18.11.2020