Реагируйте на изменение состояния с помощью setTimeOut, снова вызывая setState

Question

Новый реагирует на родную. Я хочу использовать состояние, чтобы изменить цвет кнопки (который я определил в компоненте класса) при определенном условии. Я использовал 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

попробуйте этот рабочий пример cc к вашему коду Экспо-ссылка :

Код:

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 недоступен, пока не будет вызван componentDidMount. Однако, поскольку первый раз он будет вызван через 1 секунду, я не собираюсь говорить, что это огромная проблема. Просто стандартная практика.