React-native-仅在第二次单击后更新this.setState

Question

我遇到了一个在我看来似乎很奇怪的错误。 第一次单击任何按钮时，它都是未定义的，但之后每次都能正常工作。 在创建它们时，我尝试了一些不同的操作，但最终效果相同。 是的，我确定代码是可怕的，但这是我第一次使用react / javascript，因此请进行一些监督。

地点：

    export default class Place extends Component {
        render() {
            return (

              <TouchableOpacity onPress={this.props.findPlace} style={styles.findPlace}>
                <View key={this.props.keyval} style={styles.place}>

            </Text>
                    <TouchableOpacity onPress={this.props.findPlace} style={styles.findPlace}>
                    <Text style={styles.placeText}>{this.props.val.place}</Text>


                    <TouchableOpacity onPress={this.props.deleteMethod} style={styles.placeDelete}>
                        <Text style={styles.placeDeleteText}>Delete</Text>
                    </TouchableOpacity>
                </View>

            );
        }
    }

最喜欢的地方：

let testing = this.state.savedPlaces.map((val, key)=>{
    return <Place key={key} keyval={key} val={val}
            onPress={() => {
            this.findPlace(val);
            }}
            deleteMethod={()=>this.deletePlace(key)}
               findPlace={()=>this.findPlace(val)}
            />

        return (
            <View style={styles.container}>
                <View style={styles.header}>
                <TouchableOpacity onPress={ this.addTest.bind(this) } style={styles.addButton}>
                    <Text style={styles.addButtonText}>+</Text>
                </TouchableOpacity>
                    <TextInput
                        style={styles.textInput}
                        placeholder='New'
                        onChangeText={(placeText)=> this.setState({placeText})}
                        value={this.state.placeText}
                        placeholderTextColor='white'
                        underlineColorAndroid='transparent'>
                    </TextInput>
                  //
                </View>
                <ScrollView style={styles.scrollContainer}>
                    {testing}
                </ScrollView>
                <View style={styles.footer}>
                </View>
             </View>
        );
    }
    addTest(){
      for(var i = 0; i < testdata.length; i++){
        this.state.savedPlaces.push({
          'place': testdata[i]
        });
        this.setState({ savedPlaces: this.state.savedPlaces });
        this.setState({shitText:''});
      }
    }

    addPlace(){
        if(this.state.placeText){
            this.state.placeArray.push({
                'place': this.state.placeText
            });
            this.setState({ placeArray: this.state.placeArray });
            this.setState({placeText:''});
        }
    }

    deletePlace(key){
        this.state.placeArray.splice(key, 1);
        this.setState({placeArray: this.state.placeArray});
    }

    findPlace(val){

        this.setState({
          latitude: val.latitude,
          longitude: val.longitude
        })

        console.log("1this.state.latitude", this.state.latitude)
        console.log("2this.state.longitude", this.state.longitude)


    }
}  

Answer 1

如果您像下面这样操作，它将每次都起作用。 正如前面的回答所述，所有生命周期功能都是异步的，因此您的控制台日志将始终显示以前的状态，因为控制台日志是同步功能，因此您的代码没有任何问题。 请记住，反应中的所有内容都是异步的，这一点非常重要！

findPlace(val) {
this.setState(
  {
    latitude: val.latitude,
    longitude: val.longitude,
  },
  () => {
    console.log('1this.state.latitude', this.state.latitude);
    console.log('2this.state.longitude', this.state.longitude);
  });}

Answer 2

state值不能保证立即更新。 您可以提供一个回调，作为setState的第二个参数，当状态实际更新时将调用该回调。

https://reactjs.org/docs/react-component.html#setstate