状态更改后，React-Redux连接的组件未更新

Question

我正在尝试使用React Redux。我遇到了这样一种情况：一个连接的组件（Coordinates.jsx）嵌套在另一个连接的组件（Canvas.jsx）中。

源代码https://github.com/RinatRezyapov/Vault-13.git（纱线安装，然后纱线开始）

在父组件画布中。jsx I在componentDidMount（）中调度一个操作，该操作不可变地更改状态。

帆布jsx

组件didMount（）{this.props.add画布大小（windowWidth， windowHeight）
}

问题是，在更改状态后，子组件坐标。jsx没有得到更新和控制台。日志显示未定义。

Coordinates.jsx

componentDidMount（）{console.log（this.props.canvasSize）}

我确信状态更新正确（用Redux devTool检查），我想我没有在减少状态中变异。

如果我包装console.log（this.props.canvas大小）setTimeout然后它显示corect状态。

index.js（商店）

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

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

行动/索引。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>
    )
}
} 

组件/画布。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>)
}
}

组件/坐标。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>
)
}
}

容器/画布控制。js

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

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

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

集装箱/坐标Cont.js

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

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

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

Answer 1

当处理父/子关系时，您应该记住，在调用父组件之前，组件会先调用子组件（如本答案所述https://stackoverflow.com/a/38472793/2745879）

实际上，在你的情况下，发生了以下情况：

1. 子级触发其组件didmount回调，但状态尚未定义
2. 您的控制台。日志被触发，但道具中没有任何内容
3. 父级触发其组件didmount并更新状态
4. 如果您调用控制台。在子项中记录超时，现在您的属性是最新的

现在，如果您想解决这个问题，您需要使用componentWillReceiveProps回调，每当为组件提供新属性时，就会调用该回调。https://facebook.github.io/react/docs/react-component.html#componentwillreceiveprops