Question

我试图在状态更改时更改由Flatlist呈现的按钮的图标，并依次存储此数据。我创建了一个道具以true表示一个图标名称，另一个创建了一个false来表示另一个图标名称，以查看状态变化，但该图标未被识别。有人可以帮助我吗？

糟糕：我正在使用react-native-paper设计我的应用程序的样式。

import React, {useState, useEffect} from 'react'
import { View, Text, FlatList, StyleSheet,ScrollView, Alert } from 'react-native'
import { Button, Title, Badge } from 'react-native-paper';
import AsyncStorage from '@react-native-community/async-storage'


const App = () => {

    const [recipes, setRecipes] = useState([])
    const [count, setCount] = useState(0)
    const [iconSave, setIconSave] = useState(false)


    function favRecipe(id){
        const favorites = recipes.map( recipe => {
            return recipe.id === id? {...recipe, marked:!recipe.marked} : recipe
        })
        setRecipes(favorites)
    }

    useEffect(()=>{
        const favoritedTotal = recipes.filter(recipe => recipe.marked)
        const favIcons = recipes.filter(icon => icon == true? 'star' : 'book')
        setCount(favoritedTotal.length)
        setIconSave(favIcons)
    }, [recipes])



    useEffect(() => {

        const dataRecipes = [
            {id: 1, recipe: 'Fricassê', icon: true},
            {id: 2, recipe: 'Frango assado', icon: true},
            {id: 3, recipe: 'Feijoada', icon: true},
            {id: 4, recipe: 'Feijão tropeiro', icon: true},
            {id: 5, recipe: 'Bolo de chocolate', icon: true},
            {id: 6, recipe: 'Cookies', icon: true},
            {id: 7, recipe: 'Sorvete caseiro', icon: true},
            {id: 8, recipe: 'Torta tradicional', icon: true},
            {id: 9, recipe: 'Sanduíche', icon: true},
            {id: 10, recipe: 'Torta de frango', icon: true},
            {id: 11, recipe: 'Pão de queijo', icon: true},
            {id: 12, recipe: 'Pastel português', icon: true}
        ]
        setRecipes(dataRecipes)

    }, [])

    const storeData = async () => {
        try{
            await 
            AsyncStorage.setItem('@store_icons', JSON.stringify(iconSave)),
            AsyncStorage.setItem('@store_count', JSON.stringify(count)),
            AsyncStorage.setItem('@store_recipes', JSON.stringify(recipes)).then(Alert.alert('Alerta', 'Receitas salvas com sucesso.'))
        }catch(e){
            Alert.alert('Algo deu errado, tente novamente.')
        }
    }

    useEffect(()=>{
        AsyncStorage.getItem('@store_count').then(value => setCount(value))
    }, [])

    useEffect(()=> {
        AsyncStorage.getItem('@store_icons').then(value => setIconSave(value))
    }, [])


    return (
        <ScrollView style={{padding:10, marginBottom: 10}}>
        <Badge>{count}</Badge>
            <Title style={{padding: 10}}>Receitas favoritas:</Title>
            <FlatList
            data={recipes}
            renderItem={({item}) => (
                <View style={styles.containerList}>
                <Button icon={iconSave} mode='outlined' onPress={() => favRecipe(item.id)}>{item.recipe}</Button>
                </View>
            )}
            keyExtractor={(item, index) => index.toString()}
            />
            <View style={{flex: 1, padding: 10, justifyContent: 'center'}}>
            <Button mode='contained' onPress={storeData} style={{marginBottom: 20, margin: 5}}>Salvar informações</Button>
            </View>
        </ScrollView>
    )
}

export default App

const styles = StyleSheet.create({
    containerList:{
        flex:1,
        flexDirection: 'column',
        padding: 10
    }
})

Answer 1

将Flatlist的代码更改为以下代码：

           <FlatList
            data={recipes}
            extraData={iconSave}
            renderItem={({item}) => (
                <View style={styles.containerList}>
                <Button icon={iconSave} mode='outlined' onPress={() => favRecipe(item.id)}>{item.recipe}</Button>
                </View>
            )}
            keyExtractor={(item, index) => index.toString()}
            />

我在此处添加了extraData属性到列表，因此当多余的数据发生更改时，它将重新呈现。参考：https://reactnative.dev/docs/flatlist#extradata

状态更改时如何更改图标？

1 个答案: