Question

有人可以向我解释一下，为什么在“componentWillReceiveProps”之后的函数“calcTime”中的“this.state.time”下面没有更新？

这有点奇怪，因为每次组件接收新道具时，“Text”字段中的this.state.time都会更新，但在函数“calcTime”中，“this.state.time”始终保持从“this”收到的值。 props.time”。

谢谢。

import React, { Component } from 'react';
import {
    AppRegistry,
    StyleSheet,
    Text,
    View
} from 'react-native';

export default class Time extends Component {
    constructor(props){
        super(props);
        this.state = {
            time:this.props.Time,
            info:''
        };

    }

    calcTime(){

      console.log('in calcTime '+ this.state.time)
    }

    componentWillReceiveProps(nextProps) {
        this.setState({
            time:nextProps.Time
        });
        this.calcTime();

    }


    render(){
        return(
            <View>
               <Text>{this.state.time}</Text>
            </View>
        );
    }
}

AppRegistry.registerComponent('Time', () => Time);

Answer 1

setState是异步的，您不能指望setState之后的更新状态值。要检查更新的值，请使用回调方法。像这样写，它会打印更新的值：

componentWillReceiveProps(nextProps) {
    this.setState({
           time : nextProps.Time
        }, () => this.calcTime()
    )
}

原因符合DOC ：

setState（）不会立即改变this.state但会创建一个待定状态转换。调用后访问this.state 方法可以返回现有值。没有保证调用setState和调用的同步操作为获得业绩增长而受到批评。

检查此答案：https://stackoverflow.com/a/42593250/5185595

componentWillReceiveProps不在功能中更新状态

1 个答案: