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);
  });}