setState 不切換本機反應中的值

Question

我有切換狀態變量值的功能。 狀態變量的初始值為false

這是我的功能...

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state.label){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

在初始狀態的上述表達式中，值更改為false則不會更改為true 。

我也試過..下面的方法......

    expandLists(label){
        this.setState( preState => ({label: !this.preState.label}),console.log(this.state))
    }

Answer 1

如果您將label參數作為字符串傳遞，請嘗試以下操作：

    expandLists(label){ // "label" is a state variable that passed as a string 
        let result = new Boolean();
        console.log(this.state);
        if(this.state[label]){
            result=false;
            console.log('Result = false');
        }
        else{
            result=true;
            console.log('Result = true');
        }
        this.setState({[label]: result},console.log(this.state))
    }

所以區別在於檢查當前值是否為true 。 而不是使用this.state.label ，使用this.state[label] 。

Answer 2

按照您所說的“標簽”參數類型的字符串檢查這種方式

if(this.state.label == "true"){
...
}

或者

if(this.state[label]){
...
}

Answer 3

實現這一目標的簡單方法是

 toggleLabelValue = (label) => { this.setState({ [label]: !this.state[label] }, () => console.log(this.state) ); };

Answer 4

嘗試以這種方式切換狀態：

import React from 'react';

import {
    View,
    Button,
} from 'react-native';

export default class App extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            label: false
        }
    }

    changeLabel = (currentLabel) => {
        this.setState({
            label: currentLabel
        });
    };

    toggleLabel = () => {
        this.changeLabel(!this.state.label);
    };

    render() {
        return (
            <View>
                <Button onPress={this.toggleLabel} title="Toggle Label" />
            </View>
        );
    }

}

Answer 5

這是另一個使用鈎子的實現：

import { Text, View, StyleSheet, TouchableOpacity } from 'react-native';
import Constants from 'expo-constants';

export default function App() {
  const [label, setLabel] = useState(false);
  const toggleLable = () => {
    let temp = label;
    setLabel(!temp);
  };
  return (
    <View style={styles.container}>
      <TouchableOpacity
        onPress={toggleLable}
        style={[
          styles.btn,
          { backgroundColor: label ? '#4f4' : '#f40' },
        ]}>
        <Text style={styles.text}>{label? "TRUE": "FALSE"}</Text>
        </TouchableOpacity>
    </View>
  );
}

const styles = StyleSheet.create({
  btn: {
    width: 200,
    height: 200,
    borderRadius: 20,
    justifyContent: "center"
  },
  container: {
    flex: 1,
    justifyContent: 'center',
    paddingTop: Constants.statusBarHeight,
    backgroundColor: '#ecf0f1',
    padding: 8,
    alignItems: 'center',
  },
  text:{
    fontSize: 40,
    fontWeight: "bold",
    color: "white",
    textAlign: "center"
  }
});

截屏：

您可以在此處使用代碼：切換按鈕示例

Answer 6

這對我使用 useState 有效：

import React, { useState } from 'react';
import { View, Text, TouchableOpacity } from 'react-native';
import SeparateModal from 'components/SeparateModal';

export default function Parent() { 
  const [modalVisible, setModalVisible] = useState(false);

  return (
    <View>

      <SeparateModal 
        modalVisible={modalVisible}
        setModalVisible = {setModalVisible}
      />

      <TouchableOpacity>
        <Text onPress = { () => setModalVisible(true) }>Open Modal</Text>
      </TouchableOpacity>

    </View>
  )
}

組件/SeparateModal：

export default function SeparateModal({ modalVisible, setmodalVisible }) {
  return (
    <Modal 
      visible={ modalVisible }
      animationType="slide" 
    >
      <View>
        <TouchableOpacity>
          <Text onPress = { () => setModalVisible(false) }>Close Modal</Text>
        </TouchableOpacity>
      </View>
    </Modal>
  );