componentWillReceiveProps()方法踩坑

我在使用componentWillReceiveProps()方法的时候踩了一个坑。

代码结构大致是这样的：

class Demo extends Component {
    componentWillReceiveProps(nextProps) {
        // 这里打印出来的value是父级元素最新传进来的value
        console.log(nextProps.value);
        this.resetData();
    }

    resetData() {
        // 这里的打印的value还是上一次传入的value
        console.log(this.props.value);
    }
}

这里说明一个什么问题呢？说明在componentWillReceiveProps里的调用方法中，使用this.props取得props下的属性值都是上一版的属性值，而不是最新的属性值。

那么如何解决这个问题呢？最简单的方法，当然是把最新版的、调用的函数里面需要的属性值传给函数。示例如下：

class Demo extends Component {
    componentWillReceiveProps(nextProps) {
        // 这里打印出来的value是父级元素最新传进来的value
        console.log(nextProps.value);
        this.resetData(nextProps.value);
    }

    resetData(value) {
        // 这里的打印的是最新的value
        console.log(value);
    }
}