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

Question

我正在尝试在状态更改时更改 Flatlist 呈现的按钮图标，并按顺序存储此数据。我创建了一个道具 true 来代表一个图标名称，另一个 false 代表另一个图标名称可以看到状态变化，但图标不被识别。有人可以帮助我吗？

Obs：我正在使用 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()}
            />

这里我在 flatlist 中添加了 extraData 属性，所以当额外数据发生变化时它会重新渲染。
参考：https://reactnative.dev/docs/flatlist#extradata