Question

我第一次尝试在React Native中做一些事情，我试图掷3个骰子（目前基于文本）。

我正在使用for循环遍历3个骰子的数组。但是我只看到一个骰子文本被更新（第三个）。

另外，当执行一些警报以检查for循环中发生了什么时，我看到了意外的事情吗？第一个警报显示为2，第二个警报显示为1，然后通常不再发出警报，很少会再次以0发出警报。

到目前为止，我的代码：

（文件：Game.js）

import React from 'react'
import { StyleSheet, Image, Text, View, Button } from 'react-native'

export default class Home extends React.Component {

    state = {
        dices: [null, null, null],
        rollsLeft: 3,
        keepDices: [false, false, false],
      }

    //When this component is mounted (loaded), do some defaults
    componentDidMount() {

    }

    //Roll dices
    rollDices = () => {
        for(let i = 0; i < 3; i++){
            alert('for loop at ' + i);

            //Math random to get random number from rolling the dice
            randomNumber = Math.floor(Math.random() * 6) + 1;
            //Check if the user wanted to keep a dice's value before reassigning a new value
            if(this.state.keepDices[i] === false){
                //User want to roll this dice, assign new random number to it
                //this.setState.dices[i] = randomNumber;
                let newDices = [ ...this.state.dices ];
                newDices[i] = randomNumber;
                this.setState({ dices : newDices });
            }
        }

        //Deduct 1 roll from total
        this.setState.rollsLeft--;


        //TODO: Check if rolls equals 0, then make player2 active!


    }


    render() {

        return (
          <View style={styles.container}>
            <Text> {this.state.dices[0]} ONE </Text>
            <Text> {this.state.dices[1]} TWO</Text>
            <Text> {this.state.dices[2]} THREE</Text>

            <Text>Turns left: {this.state.rollsLeft} </Text>
            <Button
              title="Roll ?" 
              onPress={this.rollDices} />
          </View>
        )
      }

}

const styles = StyleSheet.create({
    container: {
      flex: 1,
      backgroundColor: '#fff',
      alignItems: 'center',
      justifyContent: 'center'
    },
  })

Answer 1

在React Native中，setState函数是异步的。

意味着this.setState({ dices : newDices });最终可以将骰子设置为不同的值，具体取决于哪一个首先完成。

如果要控制使用setState之后发生的情况，可以在设置完成后调用函数

this.setState({dices: newDices}, () => { 
    // Do something here. 
});

在此处的setState之后，有一些关于调用函数的非常有用的信息：Why is setState in reactjs Async instead of Sync?

以及关于setState在react中如何工作以及如何解决的一些很好的解释：https://medium.com/@wereHamster/beware-react-setstate-is-asynchronous-ce87ef1a9cf3

Answer 2

与DCQ对于异步setStates绑定的有价值的输入一起，我还注意到我总是在for循环中重置复制的骰子数组，因此只能正确保存我的最后一个骰子。

接下来，for循环实际上是从0到2进行计数，但是警告框并没有像我在浏览器中那样打断代码，因此它看起来有些偏离。在做console.log（它也更干净，更正确地记录日志）时，我注意到事情确实就在那里。

与阵列反应本机for循环不做我期望的

2 个答案: