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>

            );
        }
    }

Favouriteplaces：

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

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

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

Answer 2

如果你这样做，它会每次都有效。正如之前的回答所说，所有生命周期函数都是异步的，因此控制台日志将始终显示先前的状态，因为控制台日志是同步函数，代码没有任何问题。非常重要的是要记住反应中的一切都是异步的！

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

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

2 个答案: