狀態更改后，React-Redux連接的組件不會更新

Question

我正在嘗試使用React-Redux。 我遇到一種情況，一個連接的組件（ Coordinates.jsx ）嵌套在另一個連接的組件（ Canvas.jsx ）中。

源代碼https://github.com/RinatRezyapov/Vault-13.git （安裝紗線，然后啟動紗線）

在父組件Canvas.jsx中，我在componentDidMount（）中調度了一個不變地改變狀態的動作。

Canvas.jsx

componentDidMount() { this.props.addCanvasSize(windowWidth, windowHeight)
}

問題在於，更改狀態后，子組件Coordinates.jsx不會得到更新，而console.log顯示為undefined 。

Coordinates.jsx

componentDidMount() { console.log(this.props.canvasSize) }

我確定狀態已正確更新（已通過Redux devTool檢查），而且我想我沒有將處於減少狀態的狀態進行突變。

如果我在setTimeout中包裝console.log（this.props.canvasSize），那么它將顯示coorect狀態。

index.js（商店）

const store = createStore(reducer,
window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__())

render(
<Provider store={store}>
<App />
</Provider>, 
document.getElementById('root'));

動作/ index.js

export const addCanvasSizeAction = (windowWidth, windowHeight) => ({
type: 'ADD_CANVAS_SIZE',
windowWidth,
windowHeight
})

減速器/ reducer.js

export const reducer = (state={}, action) => {
switch (action.type) {
    case 'ADD_CANVAS_SIZE':
    return Object.assign({}, state, {canvasSize: {canvasWidth: action.windowWidth, canvasHeight: action.windowHeight}})
    default: 
    return state
}
}

組件/ App.jsx

class App extends React.Component {
render() {
return (  
    <div>
            <CanvasCont />
    </div>
    )
}
} 

組件/ Canvas.jsx

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

}


componentDidMount() {
var windowWidth = window.innerWidth-100;
var windowHeight = window.innerHeight-100;
var createCanvas = document.createElement("canvas");
createCanvas.id = 'canvas';
createCanvas.width = windowWidth;
createCanvas.height = windowHeight;
ReactDOM.findDOMNode(this).appendChild(createCanvas);
var rect = canvas.getBoundingClientRect();
var ctx = createCanvas.getContext('2d');
 this.props.addCanvasSize(windowWidth, windowHeight)    
}



render() {
return (<div>
<CoordinatesCont />
</div>)
}
}

組件/ Coordinates.jsx

class Coordinates extends React.Component {

constructor(props) {
    super(props);

}
componentDidMount() {
console.log(this.props.canvasSize)
}
render() {

    var inlineStyle={
        width: "800px",
        height: "600px"
    }
       return (
    <div >
<span  style={inlineStyle} onMouseMove={this.handleMouseMove}></span>
    </div>
)
}
}

集裝箱/ CanvasCont.js

const mapStateToProps = (state) => ({
state: state
})

const mapDispatchToProps = (dispatch) => ({
addCanvasSize: (windowWidth, windowHeight) => 
{dispatch(addCanvasSizeAction(windowWidth, windowHeight))}
})

const CanvasCont = connect(
mapStateToProps,
mapDispatchToProps
)(Canvas)

集裝箱/ CoordinatesCont.js

const mapStateToProps = (state) => ({
canvasSize: state.canvasSize
})

const mapDispatchToProps = (dispatch) => ({
})

const CoordinatesCont = connect(
mapStateToProps,
mapDispatchToProps
)(Coordinates)

Answer 1

處理父/子關系時，應記住，在子componentDidMount上調用componentDidMount之前，先在子componentDidMount上對其進行調用（如本答案中所述https://stackoverflow.com/a/38472793/2745879 ）

所以實際上在您的情況下，會發生以下情況：

1. 子級觸發其componentDidMount回調，但狀態尚未定義
2. 您的console.log已觸發，但props沒有任何內容
3. 父級觸發其componentDidMount並更新狀態
4. 如果您在子項console.log調用console.log ，則您的屬性是最新的

現在，如果要解決此問題，則需要使用componentWillReceiveProps回調，每當將新屬性賦予組件時都將調用該回調。 https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops