Question

我正在使用React：16+和react-redux：6 +

我为所有动作和减速器接线。而且，只需单击一个按钮，我就可以调用mapStateToProps（），但是之后没有调用componentWillReceiveProps或shouldComponentUpdate。

这是我的代码：

class HeaderContainer extends React.Component {
    constructor(props) {
        super();

        this.props = props;
        this.state = {
            headerBtn: []
        }
    }

    componentWillReceiveProps(nextProps){
        console.log(nextProps);
    }

    render() {
        return (
            <HeaderComponent className="flx-n-grow"
                             headerBtns={this.props.headerBtns}
                             selectExchange={this.props.selectExchange}/>
        )
    }
}

const mapStateToHeaderProps = (state) => {
    console.log("received new props");
    console.log(state);
    console.log(state.HeaderReducer.headerBtns);
    return {
        headerBtns : state.HeaderReducer.headerBtns
    }
}

const mapDispatchToHeaderProps = (dispatch) => {
    return {
        selectExchange: (exchanges, exchange) => {
            dispatch(HeaderAction.selectExchange(exchanges, exchange));
        }
    }
}

export default connect(mapStateToHeaderProps, mapDispatchToHeaderProps)(HeaderContainer);

mapStateToProps内部的所有console.log都将被调用，但是componentWillReceiveProps或shouldComponentUpdate永远都不会被调用。

Answer 1

constructor(props) {
    super();

    this.props = props;
    this.state = {
        headerBtn: []
    }
}

尝试将道具添加到超级

super(props);

Answer 2

经过24小时的POC和调试后，发现我的reducer尽管使用了传播运算符也没有返回新对象：

let newState = {...state};
newState.name = ...

因此，我从Internet上阅读的内容以及Redux专门对文档进行故障排除的内容是，如果状态发生变化，则不会调用mapStateToProps。这似乎不正确。就我而言，或者在任何状态突变的情况下，Redux都会调用mapStateToProps。它根本不会调用shouldComponentUpdate（）。

被散布运算符的原因只是浅拷贝对象。因此，如果对象中存在嵌套的对象，则散布运算符将保留该对象的引用，因此，一旦内部对象更新，原始状态就会发生变化。为了避免这种情况，请始终使用可以深深复制对象的任何工具。

_.cloneDeep(stateCopy, stateInitial)

以我的情况工作。

顺便说一句

console.log(newState === state)

返回false，表示状态未突变，实际上是克隆状态。很奇怪。：（

更新

避免使用传播运算符。它不会做深层复制。仅在状态具有简单键/值对的情况下才有用。对于嵌套在对象中的复杂对象，散布运算符将严重失败。

mapStateToProps获取新道具，但无法调用componentWillReceiveProps

2 个答案:

更新