Question

class Log extends React.Component{
    constructor(props){
        super(props);

        this.scrollLogs = this.scrollLogs.bind(this);
        window.a = this;
    }

    componentDidUpdate(){
        console.log("componentDidUpdate this.props.logList", this.props.logList, window.a == this);
    }

    scrollLogs(e){
        console.log("this.props.logList", this.props.logList);
    }



    render(){
        return (<div className="logs">
            ...
            <div className="log-list" onScroll={this.scrollLogs}>
            {this.props.logList.map((l, i) => {
                return (
                    ...
                );
            })}
            </div>
        </div>);
    }
}


var mapStateToProps = (state, ownProps) => {
    return {
        logList: state.logs
    };
}

var mapDispatchToProps = (dispatch, ownProps) => {
    ...
}

export var LogContainer = connect(mapStateToProps, mapDispatchToProps)(Log);

此组件具有prop logList，它在页面加载时从服务器获取。它的初始值是[]，几秒钟后它就有大约80个对象。它的值使用redux设置。

在上面的代码中，当道具logList发生更改时，componentDidUpdate方法会被触发，this的值会发生变化，因此我无法访问this.props.logList在scrollLogs方法中，在滚动div时触发。

this.props.logList在scrollLogs内始终为空数组。在componentDidUpdate方法

中正确打印所有80个对象

您可能已经猜到window.a == this打印false。

如何访问this.props.logList内的scrollLogs？

Answer 1

我认为你的组件是这样的：

<Parent>
    <Log logList={ this.props.logList } /> 
</Parent>

this.props.logList来自您的redux商店。当您的logList商店发生变化时，<Log />组件中的道具也会发生变化，这会使其重新呈现。这就是componentDidMount触发的原因，如果您正确触发scrollLogs(e)，this.props.logList的价值也会发生变化。请尝试在render

中调用它

class Log extends React.Component{
    ...
    render() {
       this.scrollLogs()
       return <div />
    }
}

Answer 2

最后，我发现了问题。我正在使用webpack“热模块替换”功能（在问题中没有提到这个，因为我不知道它很重要）。它正在重新加载我的反应组件，这会改变this的值，因此当我尝试访问this.props.logList时，scrollLogs中的代码正在访问旧的this拥有新的logList。

＆＃39;这＆＃39;什么时候改变道具＆＃39;变化

2 个答案: