Реагировать на состояние обновления внутри метода и передавать его

Question

Я пытаюсь обновить состояние в методе start () и затем передать значение состояния в MyComponent. Мой компонент работает нормально, и состояние обновляется нормально, когда я устанавливаю его в классе, но когда я пытаюсь передать его из метода запуска - это не работает. получение "TypeError: this.setState не является функцией"

Отредактировано - исправлено связывание, но что-то по-прежнему не работает.

В чем может быть проблема?

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      val: false
    }
    this.start= this.start.bind(this)

  }

  start() {
    this.setState({ val: true })
  }

  render(){
    return (
      <View>
        <Button 
        title='start' 
        onPress={this.start}>
        </Button>

        <MyComponent value={this.state.val}> </MyComponent>
      </View>
    );
  }
}

это MyComponent:

class MyComponent extends Component {
     constructor(props){
         super(props)
         this.state={}
         this.state.custum={
            backgroundColor: 'red'
         }
         let intervalid;
         if (this.props.value){
            setTimeout(() => {
                this.setState( {
                    custum:{
                        backgroundColor: 'green'
                    }
                    })
            }, 1000);
            setTimeout(() => {
                this.setState( {
                    custum:{
                        backgroundColor: 'red'
                    }
                    })
            }, 2000);
        }
     }    
    render() {
        return (
            <View style={[styles.old, this.state.custum]}> 
            </View>
        );
      }
    }  
    var styles = StyleSheet.create({
        old:{
          padding: 5,
          height: 80,
          width: 80,  
          borderRadius:160,    

        },
    })
export default MyComponent;

Answer 1

Вы должны связать контекст с вашей функцией.

 constructor (props){
      super(props);
        this.state = {
        val: false
    }
    this.start = this.start.bind(this)
  }

или просто вы можете использовать функцию стрелки без привязки

 start = () => {
     this.setState({ val: true })
 }

Answer 2

привязать метод запуска к компоненту, иначе «this» будет не определено для функции запуска

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      val: false
    }
    this.start = this.start.bind(this)
  }

  start() {
    this.setState({ val: true })
  }

  render(){
    return (
      <View>
        <Button 
        title='start' 
        onPress={this.start}>
        </Button>

        <MyComponent value={this.state.val}> </MyComponent>
      </View>
    );
  }
}

Answer 3

Вам нужно сделать функцию запуска связываемой через конструктор или функцию стрелки ES6.

export default class App extends Component{
  constructor (props){
    super(props);
    this.state = {
      val: false
    }
  }

  start = () => {
    this.setState({ val: true })
  }

  render(){
    return (
      <View>
        <Button 
        title='start' 
        onPress={this.start}>
        </Button>

        <MyComponent value={this.state.val}> </MyComponent>
      </View>
    );
  }
}

Answer 4

Вы должны связать метод с this. Просто добавьте

this.start = this.start.bind(this)

после this.state в constructor.

EDIT

А также попробуйте переместить custom внутрь state в MyComponent следующим образом:

this.state={
  custum: {
    backgroundColor: 'red'
  }
}

и удалите

this.state.custum={
 backgroundColor: 'red'
}

Так как вы не можете просто установить подобное состояние.