如何在函数内部反应原生刷新屏幕？

Question

我希望能够从我的 FlatList 中删除元素。我无法使用 ItemView 中 TouchableOpacity 的 onPress 来做到这一点，所以我决定使用 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>
    );
};

Answer 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) {}
  }