找不到变量：setState

Question

我正在尝试制作一个切换按钮，在单击时更改图标和图标颜色，我正在学习教程，但运行遇到了这个问题。

我试过改变周围的东西，弄乱它，但我总是得到同样的错误： “找不到变量：setState”

variable Error

导致问题的代码：

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;```

Answer 1

您需要在功能组件中用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)，而不必管理同一状态变量中先前值的复制。

找不到变量：setState

Can't Find Variable: setState

javascript

variables

android

react-native

touchableopacity