Question

我是React-Native的初学者。我试图更改状态值。但是与“类”模式似乎不同。现在，我正在使用“ const”模式。在const模式下，如何更改状态值？

import React from "react";
import {
   View,
   Text,
   Image,
   TouchableOpacity
} from "react-native";

const Product = props => {
    this.state = {
        checkIconURL : require('../../assets/ic_check_circle.png')
    }
    set = () => {
        this.setState({ checkIconURL : require('../../assets/empty.png') })  //But this lines gives err.
    }

    return (
        <View>
            <Text style={{ fontSize: 16}}>Everyday</Text>
            <TouchableOpacity onPress = {this.set}>
                <Image source = {this.state.checkIconURL} style={{width: 30, height: 30}} />
            </TouchableOpacity>
        </View>
    )
}

Answer 1

以下代码不正确，因为您需要在功能组件中使用Hook来管理状态。 React提供了useState挂钩来管理功能组件中的状态。

import React ,{ useState } from "react";
import {
    View,
    Text,
    Image,
    TouchableOpacity
} from "react-native";

const Product = props => {
   const initialState = require('../../assets/ic_check_circle.png');
   const [ state,setState ]  = useState({checkIconURL: initialState});
   set = () => {
       const emptyImageUrl = require('../../assets/empty.png') });
           setState({...state, checkIconURL: emptyImageUrl })
       }

   return (
       <View>
           <Text style={{ fontSize: 16}}>Everyday</Text>
               <TouchableOpacity onPress = {this.set}>
                   <Image source = {this.state.checkIconURL} style={{width: 
                       30, height: 30}} />
               </TouchableOpacity>
       </View>
    )
}

Answer 2

状态在功能组件中不可用，this.state和this.setState（）只能在类组件中使用，必须使用useState挂钩进行反应才能使用状态...

import React ,{ useState } from "react";
import {
    View,
    Text,
    Image,
    TouchableOpacity
} from "react-native";

const Product = props => {
   const initialState = require('../../assets/ic_check_circle.png');
   const [iconUrl, setIconUrl ]  = useState(initialState);

   const set = () => {
       const emptyImageUrl = require('../../assets/empty.png')
          setIconUrl(emptyImageUrl);
    }

   return (
       <View>
           <Text style={{ fontSize: 16}}>Everyday</Text>
               <TouchableOpacity onPress = {set}>
                   <Image source = {iconUrl} style={{width: 
                       30, height: 30}} />
               </TouchableOpacity>
       </View>
    )
}

如何在const模式下更改状态值？

2 个答案: