Question

新功能，以响应本机。我想在特定条件下使用state更改按钮的颜色（在类组件中定义）。我使用了setTimeOut和setState，现在按钮更改了，但是只有一次（从深绿色到浅绿色）。使用setInterval进行了尝试，并且效果相同。我希望它从黑暗变为光明，然后再回到黑暗。但是我似乎找不到再次调用setState的方法。请一些帮助。非常感谢，这是课程组件：

class Green extends Component {
     constructor(props){
         super(props)
         this.state={}
         this.state.custum={
            backgroundColor: 'darkgreen'
         }

         if (this.props.greenFlash){
            setTimeout(() => {
                this.setState( {
                    custum:{
                        backgroundColor: 'lightgreen'
                    }
                    })
            }, 1000);
        }
     }    
    render() {
        return (
            <View style={[styles.greenB, this.state.custum]}> 
            </View>
        );
      }
    }  
    var styles = StyleSheet.create({
        greenB:{
          padding: 5,
          height: 80,
          width: 80,  
          borderRadius:160,    

        },
    })
export default Green;

Answer 1

根据您的代码尝试该工作示例expo link：

代码是：

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

// You can import from local files
import AssetExample from './components/AssetExample';

// or any pure javascript modules available in npm
import { Card } from 'react-native-paper';

class Green extends React.Component {
     constructor(props){
         super(props)
         this.state={
            backgroundColor: 'darkgreen'
         }

     }   

     componentDidMount() {
       setInterval(() => {
         if(this.state.backgroundColor == "darkgreen"){
           this.setState({backgroundColor:'red'})
         } else {
           this.setState({backgroundColor:'darkgreen'})
         }

     },1000)
     }
    render() {
        return (
            <View style={[styles.greenB,{backgroundColor:this.state.backgroundColor}]}> 
            </View>
        );
      }
    }  
    var styles = StyleSheet.create({
        greenB:{
          padding: 5,
          height: 80,
          width: 80,  
          borderRadius:160,    

        },
    })
export default Green;

Answer 2

我会这样：

constructor(props) {
     super(props)
     this.state={}
     this.state.custum={
        backgroundColor: 'darkgreen'
     }

     if (this.props.greenFlash){
        this.intervalId = setInterval(() => {
            this.setState(prevState => {
              const bgcolor = (prevState.custum.backgroundColor === 'lightgreen') ? 'darkgreen' : 'lightgreen';
              return {
                custum:{
                    backgroundColor: bgcolor
                 }
                }
            })
        }, 1000);
    }
 }

一些注意事项：

A）您正在保存this.intervalId，因此可以在clearInterval(this.intervalId)中呼叫componentWillUnmount。否则，您的间隔将在组件被破坏很长时间后继续调用。

B）您可能希望在componentDidMount中而不是在构造函数中定义间隔，因为这通常是调用this.setState时的标准，因为this.setState在{ {1}}被调用。但是，因为第一次调用它是在1秒后，所以我不会说这是一个很大的问题。只是标准做法。

使用setTimeOut再次响应更改状态并调用setState

2 个答案: