反应原生的setState值

时间:2017-12-24 03:44:47

标签: javascript reactjs react-native

我在反应原生中有改变状态值的问题。更改(headerText)的值时。它在方法的第一次调用中没有变化。所以它会显示错误的输出。也许是因为(headerText)的值是基于(索引)值,它将在同一时间发生变化?我怎么解决它?我需要分配一个(索引)值然后赋值(headerText)值

    nextRiddle=()=>{

  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);

  //next riddle
  if(this.state.index < riddle.length-1){
    this.setState({index : this.state.index+1})
    this.setState({headerText : (this.state.index+1)});
  } else {
    this.setState({index : 0}) ;
  }

  //random color
  randomIndexText = 0;
  randomIndexButton = 0;

    while(randomIndexText == randomIndexButton)
      {
        randomIndexText = Math.floor((Math.random() * (colorDark.length-1)));
        randomIndexButton = Math.floor((Math.random() * (colorDark.length-1)));
      }

  this.setState({textBGColor : colorDark[randomIndexText]}) ;
  this.setState({textColor : colorLight[randomIndexText]}) ;
  this.setState({buttonBGColor : colorDark[randomIndexButton]}) ;
  this.setState({buttonColor : colorLight[randomIndexButton]}) ;


  LayoutAnimation.configureNext(LayoutAnimation.Presets.spring);
  this.setState({titleFont: 45});


    //animation for riddle text

    if(this.state.animationState==0){

      this.state.textFont = 50
      this.state.animationState =1;
    }else{
      this.state.textFont = 45
      this.state.animationState =0;
    }
}

2 个答案:

答案 0 :(得分:2)

我怀疑您的问题是由javascript:void(document.getElementById('DOPBSPCalendar-form-field1_1').value='first'); 异步引起的。你正在编写上面的代码,期望它是同步的,但事实并非如此。

换句话说,这就是发生的事情:

setState

这就是你需要做的事情(异步):

this.setState({ foo: 'bar' });
this.state.foo;  // undefined (or some other previous value).

您可能会遇到一些将其纳入现有代码的常见问题,但您需要使用this.setState({ foo: 'bar' }, () => { this.state.foo; // 'bar', what we expect it to be. }); 的第二个参数,即回调函数。

答案 1 :(得分:0)

我只使用变量而不是状态。它工作正常。