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

新的反应是本地的。 我想使用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;

class绿色扩展组件{
建造师（道具）{
超级（道具）
this.state={}
这是国家银行={
背景颜色：“暗绿色”
}
如果（此.props.greenFlash）{
设置超时（（）=>{
此.setState（{
客户：{
背景颜色：“浅绿色”
}
})
}, 1000);
}
}    
render（）{
返回(
);
}
}  
var styles=StyleSheet.create({
格林B：{
填充：5，
身高：80，
宽度：80，
边界半径：160，
},
})
导出默认绿色；

根据您的代码尝试以下工作示例：

代码是：

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;

import*as React from'React'；
从“react native”导入{Text，View，StyleSheet}；
从“expo常量”导入常量；
//可以从本地文件导入
从“./components/AssetExample”导入AssetExample；
//或npm中可用的任何纯javascript模块
从“react native paper”导入{Card}；
类Green扩展了React.Component{
建造师（道具）{
超级（道具）
这个州={
背景颜色：“暗绿色”
}
}   
componentDidMount（）{
设置间隔（（）=>{
if（this.state.backgroundColor==“暗绿色”）{
this.setState（{backgroundColor:'red'}）
}否则{
this.setState（{backgroundColor:'darkgreen'}）
}
},1000)
}
render（）{
返回(
);
}
}  
var styles=StyleSheet.create({
格林B：{
填充：5，
身高：80，
宽度：80，
边界半径：160，
},
})
导出默认绿色；

我会这样做：

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）
。否则，您的interval将在组件被销毁后很长时间内继续调用

B） 您可能希望在
componentDidMount
中定义间隔，而不是在构造函数中定义间隔，因为调用
this.setState
时，这通常是标准的，因为在调用
componentDidMount
之前，
this.setState
不可用。然而，因为它第一次被调用是在1秒之后，我不会说这是一个巨大的问题。只是标准做法。
您是否也可以发布不起作用的代码？你说你试图把它改回暗绿色，我在你上面的代码中看不到。我试了几个小时，删除了所有我试过的东西，但只是因为你的评论让我再试一次——它现在起作用了。所以，谢谢你lol我所做的只是用settimeout再次设置setstate，但是更改了计时器，使其与第一个计时器匹配