[英]getDerivedStateFromProps Does not re-render after Redux Reducer state is updated
I'm using the new getDerivedStateFromProps
since componentWillReceiveProps
was deprecated. 我正在使用新的
getDerivedStateFromProps
因为不推荐使用componentWillReceiveProps
。 However it does not seem to work as expected, as nothing happens after I update the Redux state. 但是它似乎没有按预期工作,因为在更新Redux状态后没有任何反应。
Expected 预期
props.modal
is updated and the component re-renders props.modal
已更新,组件重新渲染 Results 结果
"react": "^16.3.2",
"react-dom": "^16.3.2",
Note here in this screenshot, I'm able to update the Redux state, modal
has been updated, yet my component does not update and re-render. 请注意这个截图,我能够更新Redux状态,
modal
已经更新,但我的组件没有更新和重新渲染。
I expect this code to be called a 2nd time: 我希望第二次调用此代码:
static getDerivedStateFromProps(nextProps, nextState) {
const { modal } = nextProps;
console.log('getDerivedStateFromProps', nextProps);
console.log(' nextState', nextState);
return { modal };
}
Or at least the console.log's in my render method to be called a twice time, this never happens. 或者至少我的render方法中的console.log被称为两次,这种情况从未发生过。 Any ideas why?
有什么想法吗?
import React, { Component } from "react";
import { connect } from "react-redux";
// MUI
import { withStyles } from "@material-ui/core/styles";
// Components
import TopNav from "components/Common/topNav";
// import ProductModal from 'components/Common/productModal';
// Utils
import { findNotification, showNotification } from "utils/notifications";
const styles = {
root: {
flexGrow: 1,
display: "flex",
flexDirection: "column",
height: "100%"
}
};
class Main extends Component {
static getDerivedStateFromProps(nextProps, nextState) {
const { modal } = nextProps;
console.log("getDerivedStateFromProps", nextProps);
console.log(" nextState", nextState);
return { modal };
}
constructor(props) {
super(props);
this.state = {
modal: {}
};
}
componentDidUpdate(props) {
console.log("componentDidUpdate", props);
}
render() {
const {
classes,
children,
notifications,
currentNotification
} = this.props;
console.log("this.props", this.props);
console.log("this.state", this.state);
const notificationObj = findNotification(
currentNotification,
notifications
);
return (
<div className={classes.root}>
{/* <ProductModal /> */}
<TopNav />
{showNotification(notificationObj)}
{children}
</div>
);
}
}
const mapStateToProps = ({ modal }) => ({
modal
});
export const MainJest = Main;
export default connect(
mapStateToProps,
null
)(withStyles(styles)(Main));
import {
MODAL_CLOSE_MODAL,
MODAL_SET_MODAL
} from 'actions/types';
export const initialState = {
modal: {
name: '',
props: {}
}
};
const modalsReducer = (state = initialState, { type, payload }) => {
switch (type) {
case MODAL_SET_MODAL:
return {
...state,
modal: {
name: payload.modalName,
props: payload.modalProps
}
};
case MODAL_CLOSE_MODAL:
return {
...state,
modal: {
name: '',
props: {}
}
};
default:
return state;
}
};
export default modalsReducer;
Turns out my problem was in the mapStateToProps
事实证明我的问题出在
mapStateToProps
Needed to pull the state from modalsReducer
需要从
modalsReducer
拉出状态
const mapStateToProps = (state) => {
console.log('mapStateToProps state:', state);
return state.modalsReducer;
};
Also needed to flatten my state inside the modalsReducer
还需要在
modalsReducer
展平我的状态
import {
MODAL_CLOSE_MODAL,
MODAL_SET_MODAL
} from 'actions/types';
export const initialState = {
modalName: '',
modalProps: {}
};
const modalsReducer = (state = initialState, { type, payload }) => {
switch (type) {
case MODAL_SET_MODAL:
return {
...state,
modalName: payload.modalName,
modalProps: payload.modalProps
};
case MODAL_CLOSE_MODAL:
return {
...state,
modalName: '',
modalProps: {}
};
default:
return state;
}
};
export default modalsReducer;
So the Redux was not connected properly... 所以Redux没有正确连接......
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.