javascript - getDerivedStateFromProps 在 Redux Reducer 状态更新后不重新渲染
问题描述
我正在使用新的getDerivedStateFromProps
,因为componentWillReceiveProps
已被弃用。但是它似乎没有按预期工作,因为在我更新 Redux 状态后没有任何反应。
预期的
- Action / Reducer 已更新
- 组件 Main 的
props.modal
更新和组件重新渲染
结果
- Action / Reducer 已更新
- 主组件中什么也没有发生
"react": "^16.3.2",
"react-dom": "^16.3.2",
请注意,在此屏幕截图中,我能够更新 Redux 状态,modal
已更新,但我的组件没有更新和重新渲染。
我希望这段代码被第二次调用:
static getDerivedStateFromProps(nextProps, nextState) {
const { modal } = nextProps;
console.log('getDerivedStateFromProps', nextProps);
console.log(' nextState', nextState);
return { modal };
}
或者至少我的渲染方法中的console.log被调用了两次,这永远不会发生。任何想法为什么?
组件代码:
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;
解决方案
原来我的问题出在mapStateToProps
需要从modalsReducer
const mapStateToProps = (state) => {
console.log('mapStateToProps state:', state);
return state.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;
所以 Redux 没有正确连接......
推荐阅读
- java - 了解主类如何影响 JPMS
- c# - 下载文件时出现内存不足异常(DevExpress Filemanager)
- r - 如何从剪切函数中获取中断项目的总和 - R 问题
- elasticsearch - 从站点的特定部分搜索并返回(SOLR 和 SOLR.NET)
- iis - ASP.NET Core 应用程序在空闲后响应请求很慢
- c# - 如何正确地对变量应用强制转换,以便它带来强制转换附带的方法?
- .net - 如何测试 .Net Core 测试项目引用的 .NETStandard 程序集测试?
- json - 从两列数据框(Python3)为 d3 可折叠树视觉创建 json 层次结构树
- java - findBySQL 对有效查询不返回任何内容
- sql - 用于 CSV 导出的 TRIM char 空格尾随空格