Javascript Can'；找不到变量：setState

我正在尝试制作一个切换按钮，当点击时可以改变图标和图标颜色，我正在学习一个教程，但是遇到了这个问题

我试着改变一些事情，把它搞乱了，但我总是犯同样的错误： “找不到变量：setState”

导致问题的代码：

import { View, Text, StyleSheet ,Image, TouchableOpacity } from 'react-native';
import Icon from 'react-native-vector-icons/Ionicons';
import { Caption } from "react-native-paper"

const FlagSection = (props) => {

    const state = {
        heartIcon: "ios-heart-outline",
        liked: false
    }

    const toggleLike = () => {
        setState({
            liked: !state.liked
        })

        if(state.heartIcon){
            setState({
                heartIcon: "ios-heart"
            })
        }else{
            setState({
                heartIcon: "ios-heart-outline"
            })
        }
    }

    return (
        <View style={ styles.container }>
            <View style={ {flex:1} }>
            
                <View style= {styles.flagInfo}>
                    <View style= {styles.imageContent}>
                        <Image
                            source={ props.detail.flag }
                            size={60}
                        />

                        <View style= {styles.currencyContent}>
                            <Text> {props.detail.abbreviation} </Text>
                            <Caption style={ styles.caption }> {props.detail.name} </Caption>
                        </View>

                        <View style= {styles.likeButton}>
                            <TouchableOpacity onPress={ toggleLike }>
                                <Icon name={state.heartIcon} size={40} style={{color: state.heartIcon === "ios-heart-outline" ? "black" : "red"}}/>
                            </TouchableOpacity>
                        </View>
                    </View>
                </View>
            
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
    },
    flagInfo: {
        paddingLeft: 20,
        borderWidth: 5,
    },
    imageContent: {
        flexDirection: "row",
        marginTop: "3%",
    },
    currencyContent: {
        marginLeft: "3%",
        flexDirection: "column"
    },
    caption: {
        fontSize: 16,
        paddingTop: "3%",
        lineHeight: 14,
    },
    likeButton: {
        flexDirection: "row",
        justifyContent: "flex-end",
        marginLeft: "auto"
    }
});

export default FlagSection;```

从'react native'导入{视图、文本、样式表、图像、TouchableOpacity}；
从“反应本机矢量图标/离子图标”导入图标；
从“react native paper”导入{Caption}
常量FlagSection=（道具）=>{
常量状态={
心形图标：“ios心形轮廓”，
喜欢：错
}
常量toggleLike=（）=>{
设定状态({
喜欢：！state.liked
})
if（state.heartIcon）{
设定状态({
心脏图标：“ios心脏”
})
}否则{
设定状态({
心脏图标：“ios心脏轮廓”
})
}
}
返回(
{props.detail.缩写}
{props.detail.name}
)
}
const styles=StyleSheet.create({
容器：{
弹性：1，
},
flagInfo：{
paddingLeft:20，
边框宽度：5，
},
图像内容：{
flexDirection:“行”，
玛金托普：“3%”，
},
货币内容：{
保证金左列：“3%”，
flexDirection：“列”
},
标题：{
尺寸：16，
paddingTop：“3%”，
线高：14，
},
像按钮：{
flexDirection:“行”，
辩护内容：“柔性端”，
marginLeft：“自动”
}
});
导出默认标志节```

您需要使用功能组件中的

useState

定义初始状态：

const [state, setState] = useState({
    heartIcon: "ios-heart-outline",
    liked: false
});

然后，要更新单个属性而不丢失另一个属性，请扩展现有状态：

setState({
    ...state,
    liked: !state.liked
})

但我强烈建议将属性分离为不同的有状态变量：

const [heartIcon, setHeartIcon] = useState('ios-heart-outline');
const [liked, setLiked] = useState(false);

---

然后，您只需要使用，例如，

setLiked（！liked）

，而不必管理相同状态变量中先前值的复制。

您需要在功能组件中使用

useState

定义初始状态：

const [state, setState] = useState({
    heartIcon: "ios-heart-outline",
    liked: false
});

然后，要更新单个属性而不丢失另一个属性，请扩展现有状态：

setState({
    ...state,
    liked: !state.liked
})

但我强烈建议将属性分离为不同的有状态变量：

const [heartIcon, setHeartIcon] = useState('ios-heart-outline');
const [liked, setLiked] = useState(false);

---

然后，您只需要使用，例如，

setLiked（！liked）

来管理对同一状态变量中先前值的复制。

在functional component中创建状态的方式是不正确的。请参阅了解如何在功能组件中使用状态。您在功能组件中创建状态的方式不正确。请参阅了解如何在功能组件中使用状态。