React-Redux :在父更改中的mapStateToProps上重新渲染子组件不起作用
React-Redux是一个用于在React应用中管理状态的库。它结合了React和Redux，提供了一种可预测、可维护和可扩展的状态管理解决方案。
在React-Redux中，通过使用connect函数将React组件连接到Redux的store。connect函数接受两个参数：mapStateToProps和mapDispatchToProps。其中，mapStateToProps是一个函数，用于将store中的状态映射到组件的props上；mapDispatchToProps是一个函数或对象，用于将action创建函数映射到组件的props上。
当父组件中的mapStateToProps发生变化时，React-Redux会检测到这个变化，并重新渲染子组件。但是，如果在父组件中的mapStateToProps中的返回值没有发生变化，React-Redux会认为子组件的props没有变化，从而不会重新渲染子组件。
这种情况下，可能有以下几个原因导致子组件不重新渲染：
- mapStateToProps返回的对象或数组没有发生变化：React-Redux使用浅比较来检测props是否发生变化，如果返回的对象或数组没有发生引用变化，即使其中的值发生了变化，子组件也不会重新渲染。解决方法是确保返回的对象或数组是一个新的引用。
- 父组件没有重新渲染：如果父组件没有重新渲染，那么子组件也不会重新渲染。可以检查父组件的shouldComponentUpdate方法或React.memo来确保父组件的重新渲染。
- 子组件的shouldComponentUpdate或React.memo阻止了重新渲染：如果子组件中的shouldComponentUpdate方法返回false，或者使用了React.memo并且props没有发生变化，那么子组件不会重新渲染。可以检查子组件的shouldComponentUpdate方法或React.memo的使用。
总结起来，如果在父组件中的mapStateToProps上重新渲染子组件不起作用，可以检查返回的对象或数组是否发生了引用变化，确保父组件重新渲染，以及检查子组件的shouldComponentUpdate方法或React.memo的使用。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云官网：https://cloud.tencent.com/
- 云服务器CVM：https://cloud.tencent.com/product/cvm
- 云数据库MySQL：https://cloud.tencent.com/product/cdb_mysql
- 云原生应用引擎TKE：https://cloud.tencent.com/product/tke
- 人工智能平台AI Lab：https://cloud.tencent.com/product/ailab
- 物联网平台IoT Hub：https://cloud.tencent.com/product/iothub
- 移动开发平台MPS：https://cloud.tencent.com/product/mps
- 云存储COS：https://cloud.tencent.com/product/cos
- 区块链服务BCS：https://cloud.tencent.com/product/bcs
- 元宇宙服务：https://cloud.tencent.com/product/metaspace
相关·内容
嗨，我有两个react组件parent和child，它们都连接到redux store到同一个对象，对象从服务器asynchronously获取数据。
问题：在接收新道具时，父母的componentWillReceiveProps会被执行，但是孩子的componentWillReceiveProps没有执行任何想法？？
子组件
import React, {Component} from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-redu
浏览 2提问于2017-08-14得票数 1
1回答
我创建了一个简单的redux应用程序。在工具中，我检查“高亮更新”。然后单击任意按钮，显示所有组件都已更新，但"AddButton“中的控制台消息没有显示任何内容。错误控制台，反动开发工具还是我？
// index.js
import React from "react";
import ReactDOM from "react-dom";
import App from "./App";
import { Provider } from "react-redux";
import { createStore } fro
浏览 1提问于2019-02-22得票数 1
回答已采纳
我已经为我的一个组件实现了无限滚动。代码结构如下所示 我有一个名为的父组件，这个组件执行文章列表的抓取调用。下面是代码 import React, { Component } from 'react'
import PropTypes from 'prop-types'
import { connect } from 'react-redux'
import Row from 'muicss/lib/react/row'
import ReactCSSTransitionGroup from 'react-addon
浏览 141提问于2019-03-19得票数 0
回答已采纳
这是我的reducer代码
const authReducer = (
state = {
isAuthenticated: !AuthService.isTokenExpired(),
isFetching: false,
profile: AuthService.getProfile(),
error: null
},
action
) => {
switch (action.type) {
case types.LOGOUT_SUCCESS:
return Object.assign({}, state, {
浏览 1提问于2018-06-21得票数 0
翻译只适用于刷新。这似乎是因为我在App.js上使用了一个包装器，这就是为什么它不能工作。
另外，我试图为intlprovider添加一个键，翻译成功了，但是现在我所有的内部组件都得到了刷新。
在使用应用程序包装时，是否可以不刷新所有内部组件而使用reactintl？？
下面可以找到app.js、index.js和应用程序包装器：
Index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import './sty
浏览 0提问于2018-11-09得票数 0
回答已采纳
我可能过多地考虑了这一点，但我很好奇直接导入子组件在耦合和测试方面是不是不好的做法。
下面是一个简单的例子：
import Header from './header.jsx';
class Widget extends React.Component {
render() {
return (
<div>
<Header></Header>
<div>{this.props.importantContent}<
浏览 4提问于2018-01-23得票数 2
我有一个渲染terminale模拟器的终端组件。 import React, { Component } from 'react';
import { withStyles } from '@material-ui/core/styles';
import { XTerm } from '../../node_modules/react-xterm';
import os from 'os';
import { connect } from 'react-redux';
import '../../nod
浏览 35提问于2019-03-15得票数 0
回答已采纳
1回答
我遵循这个，在其中一个示例中，他使用一个选择器来选择屏幕中的数据。当他尝试的时候，它看起来很有效，但是现在当我尝试渲染它的时候，我得到了一个奇怪的结果。
如果我完全按照他的代码进行选择，那么在做了一些更改之后，我让它在正确的位置显示，但是现在它被压缩了，这仍然是不正确的：
在如何呈现它方面，我肯定做错了一些事情，下面是代码()：
import React from 'react';
import {Picker, Text, StyleSheet, View} from 'react-native';
import {connect} from
浏览 0提问于2018-03-08得票数 2
回答已采纳
我想知道如果connect()ed的父组件在shouldComponentUpdate中返回false，它是否会重新呈现
比如说，我们有一个组件树，看起来像这样
connect(Foo extends PureComponent)
DumbBar
connect(Baz extends PureComponent)
因此，无论是Baz还是Foo，如果它们自己的道具(由mapStateToProps提供给它们)保持不变，那么它们都不应该重新渲染。但是，如果redux存储的状态发生更改，并且connect()ed Baz组件收到状态更改的通知并获得新的属性，会发生什么情况呢
浏览 2提问于2017-11-08得票数 1
我有我所有的组件包装在react redux中，我试图通过单击某个按钮来呈现来自另一个组件的某个组件，但我无法获得传递的道具
这是我试图用一些道具来渲染子组件的代码：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ChildComponent from './child_component';
class Home extends Component {
constructor(props) {
super(p
浏览 1提问于2018-05-25得票数 3
我对React生命周期有些困惑，特别是componentDidMount如何与redux交互。
下面是一个场景:我有一个连接到redux存储的组件，并且我不知道每当redux存储更新并且连接组件中的道具发生变化时，是否应该再次调用componentDidMount。现在，每次道具更改时，都会重新安装一个组件。但是，我有另一个单独的连接组件，当它的道具发生变化时，它不会重装。所以现在我迷失了，因为这种不一致的行为。
我环顾四周，但一些像和这样的答案让我感到困惑。
下面是当道具更改时没有正确更新的代码示例
import React, { Component } from 'react&
浏览 0提问于2018-07-25得票数 0
回答已采纳
我们有一个组件需要访问Redux的存储。
import React from 'react'
import { connect } from 'react-redux'
const Component = (props) => {
... code ...
}
我们已经使用connect将此组件连接到存储。
export default connect(mapStateToProps)(Component)
现在我们需要定义作为第一个参数传递给connect的mapStateToProps。
const mapStateToProps = stat
浏览 1提问于2019-06-18得票数 7
我正在努力开发一个React-redux应用程序，以便通过状态将值从一个组件传递到另一个组件。我不希望使用reducer和/或dispatch，因为我不是在调用and服务，我只想从文本框窗体中获取一个值，以便在order组件上启用另一个控件。
首先，我可以从控件中获取值，但是当mapstatetoprops被调用时，我设置并希望添加到状态的变量是未定义的。这也可能解释了为什么我的另一个问题。在我的另一个组件上，使用props的函数从未被调用过，因为状态组件
下面是相关的代码片段：
<ListItemContent>
<Control component={Textfi
浏览 28提问于2017-03-17得票数 0
2回答
我有一个名为AvailabiltyCalender的组件，它还有一个名为DatePicker的子组件。智利组件有一个名为focusedInput的状态。我需要从AvailabiltyCalender组件访问该状态并获取该状态值。我怎么能做到这一点。
AvailabiltyCalender组件
import React, { Component } from 'react';
import './AvailabilityCalender.css';
import backArrow from '../../../assets/images/back.png
浏览 3提问于2018-02-18得票数 0
1回答
我开始使用React + Redux和框架的新手。*
我想做什么？
我必须单击一个按钮，在单击时，它将在其他容器/ svg标记中显示svg路径。
我的代码还是我的代码
import { connect } from "react-redux";
import { BodyTemplate, Button } from "../component/svgPreview/Preview.jsx";
import { previewBodyTemplate } from "../modcon/Actions.js";
const mapStateTo
浏览 0提问于2016-04-24得票数 1
这是我的组件。它会在第一次渲染。随后，即使render被调用，它也不会更改DOM。
Render在正确的时间被调用，因为我已经设置了redux，并且我的'mapStateToProps‘似乎工作正常，因为它检测到应用程序状态的变化，并调用render()。
控制台日志确实记录了字符串已更改的事实。
你可能希望看到更多的代码，但我希望我在这里遗漏了一个基本的概念，有人可以指出。我不知道如何把我的整个项目放在这里。谢谢。再一次，render会被调用，所以它不应该更新DOM吗？
import React from 'react';
import { Component } f
浏览 1提问于2016-08-23得票数 4
2回答
我有以下父组件：
import React, { Component, PropTypes } from 'react'
import { connect } from 'react-redux';
import {bindActionCreators} from 'redux';
import _ from "lodash";
import ChildComponent from "./ChildComponent";
class ParentComponent extends Component {
浏览 1提问于2018-02-01得票数 0
我尝试从父组件调用子组件中的handleToggle()函数，尽管看起来一切正常，但this.clickAddGoal(stageContent);显示为undefined
class ParentClass extends Component
{
constructor(props, context)
{
super(props, context);enter code here
this.state = {stageContent: ''};
this.getStageContent = this.getSta
浏览 1提问于2018-02-19得票数 1
这不是关于像useSelector或useDispatch这样的react-redux钩子的问题。我很想知道在这个例子中，什么时候有必要使用像useEffect这样的React钩子来使用react-redux connect()。
假设我有一个函数组件，如果someReduxData存在，它将"Hello world“呈现为绿色，否则它将呈现为红色。
const RandomComponent = ({ someReduxData }) => {
const style = {
color: someReduxData ? "green" : "
浏览 8提问于2020-05-25得票数 0
回答已采纳
我对Redux和React有一个奇怪的问题。状态会正确地更改，并且在mapStateToProps中我也会获得正确的新状态，但是在映射之后，组件将不会重新呈现。
这样，组件就不会重新呈现：
import React, { Component } from 'react';
import { connect } from 'react-redux';
class ListItem extends Component {
render() {
return (<li>{this.props.item.text}</li>
浏览 36提问于2018-06-10得票数 1
回答已采纳
例如，我有一个名为List的React Hook组件，它具有任意数量的子项Entry (可以添加或删除)。如果条目的数据发生变化，我如何才能在不重新渲染父条目的情况下更新它，这将重新渲染其所有兄弟项，这可能是巨大的。我希望避免使用useRef和useImperativeHandle，首先是因为我的代码变得更加复杂，而使用react-sortable-hoc使得使用它们变得不可能。
浏览 32提问于2020-03-06得票数 0
2回答
当我的父组件呈现时，它覆盖了子消息，对于每个父组件，我得到了2个相同的消息。请帮帮我。下面是我的父组件。例如，我的父母有4个项目。
{
project1: { message1: 'hello this message for project 1',message2: 'messsage 2 for project 1'},
project2: { message1: 'hello this message for project 2',message2: 'messsage 2 for project 2'}
};
但是
浏览 0提问于2017-08-24得票数 1
我有密码
import React,{Component} from "react"
import {connect} from "react-redux"
class Aside extends Component{
renderAside(){
const asideItems = this.props.cart
console.log(asideItems) // Not Working never
return asideItems.map((item, key) =>{
return(
&l
浏览 3提问于2020-12-14得票数 0
回答已采纳
我正在为一个freeCodeCamp.org项目构建一个投票应用程序。
每一项投票都有一份投票选项清单。
在一次投票中，我试图提供所有可供选择的投票方式。
直接在投票组件中标记投票选项是有效的，但当我将标记分解为“选项”子组件时，则不起作用。
在react工具中，出现了一个连接标记，但没有DIV，这使我认为我处理的呈现完全错误。
图像
a_poll.js (父组件)
import React, { Component } from 'react';
import { connect } from 'react-redux';
import PollOption
浏览 4提问于2017-09-19得票数 1
1回答
我有一个Parent组件和一个Child组件，我的操作可以在子组件中触发一些api调用，而在componentWillMount上，我签入了if条件--一些来自父级的props，并执行了一些触发器。如果条件为true，则触发呈现新组件的方法。问题是，在componentWillmount中的子组件中，props this.props.person和this.props.notFound是未定义的，但是在呈现和检查这个支持之前，我需要等待api请求。
父母：
export class Parent extends Component {
state = {
id: this.pro
浏览 0提问于2018-05-11得票数 1
下面的代码是Parent和DataFilter。
Parent.js
const Parent = () => {
const [filteredData, setFilteredData] = useState()
...
const Filter = () => {
return (
<div>
<h2>Filter your data</h2>
<DataFilter data={filteredData} updateFilter={setFilteredData}
浏览 8提问于2021-12-15得票数 0
2回答
我有一个简单的应用程序，使用redux和react-router。我将我的应用程序组件包装在一个提供者标签中，以便它可以访问商店。我(在App.js中)在App.js中连接了mapStateToProps和mapStateToDispatch。我不确定如何将在App.js中定义的函数传递给子组件，因为我正在使用路由。我试着做渲染技巧，但它不起作用。如果我可以将它传递给CelebrityPage组件，我将如何在文件中接收它？任何帮助都将不胜感激。
这是我的App.js
import React, { Component } from 'react';
import { conne
浏览 0提问于2020-10-24得票数 0
然后 import React, { Component } from 'react';
import { connect } from 'react-redux';
import { bindActionCreators } from 'redux';
import { userActions } from 'redux/actions/userActions';
class Example extends Component {
componentDidMount() {
this.props.us
浏览 12提问于2020-02-01得票数 0
3回答
代码：
根成分
<Provider store={Store}>
<AppLayoutContainer>
{this.props.template}
</AppLayoutContainer>
</Provider>
AppLayoutContainer
....some code
return(
<div className={`AppLayoutContainer`}>
<Modal isOpen={isModalShown} .
浏览 0提问于2016-09-24得票数 3
回答已采纳
我正在使用react-redux，并且我有一个组件连接到它。我的组件有自己的属性(变量和函数)，也有一些来自store的状态映射，使用mapStateToProps。 管理这个组件何时应该重新呈现对我们来说非常重要，为此，我们使用propsAreEqual作为React.memo的第二个参数。 ...
const mapStateToProps = (state: RootState) => ({
name: state.user.name,
});
const dispatchProps = {
editProfile: userActions.editProfile,
浏览 22提问于2020-09-14得票数 1
回答已采纳
2回答
我有以下组件- PLoad.js： import React, { useEffect } from 'react';
import { connect } from 'react-redux';
import Spinner from '../../../components/UI/Spinner/Spinner';
import { getLoad } from '../../../store/actions/poe';
import Load from '../../../components/apps/P/Loa
浏览 16提问于2020-07-13得票数 0
当更新mapStateToProps并且props在项目组件中不被接受时，项目不会呈现，如果使用组合器，它可以工作，但如果没有组合器，项目将不会呈现 reducer.js 这是我的reducer，我在其中维护了状态，但它在这里更新了，但在项目组件中，它的渲染状态也更新了 export const initialState={
rows:[],
projectformvalue:{
projectname:"",
companyname:"",
description:"",
estimat
浏览 19提问于2018-12-24得票数 2
回答已采纳
如果可能的话，我想让我的主组件状态知道而不创建额外的文件.这是我的密码：
import React from 'react';
import { Provider } from 'react-redux';
import { connect } from 'react-redux';
import store from './store';
const App = ({ isAuthenticated }) => {
return (
<Provider store={store}>
浏览 0提问于2019-08-21得票数 4
回答已采纳
我正在尝试访问在我的reducer的初始状态中定义的name字段。目前，this.props正在返回未定义的。 我的reducer： import { combineReducers } from 'redux';
const INITIAL_STATE = {
name: "Test"
}
const userReducer = (state = INITIAL_STATE, action) => {
switch (action.type) {
default:
return state
}
}
浏览 24提问于2019-12-21得票数 1
回答已采纳
1回答
我试图以预先设置指定路由的所有子路由的布局的方式嵌套路由。
例如：
<Provider store={store}>
<Router history={history}>
<Router path="/" component={Init}>
<Router component={LayoutThreeCol}>
<IndexRoute component={PageContainer}/>
</Router&g
浏览 3提问于2017-01-22得票数 1
我有一个React类，它在react-redux的Provider中呈现。
<Provider store={store}>
<First/>
</Provider>
因此，我可以很容易地在react-redux的mapDispatchToProps和mapStateToProps中使用First。
但是在First中，我呈现的另一个组件如下所示：
ReactDOM.render(
React.createElement(Second),
document.getElementById('preview-right&#
浏览 1提问于2017-01-07得票数 1
主要应用程序组件中的代码如下：
class App extends Component {
componentDidMount(){
console.log(this.ref);
debugger;
}
render() {
return (
<div>
<Header/>
{this.props.children}
<Footer/>
</div>
);
}
}
使用{this.pr
浏览 3提问于2016-10-17得票数 21
我正在重构一些代码，并将类组件转换为函数组件，以学习如何使用钩子和效果。我的代码使用Redux进行状态管理，axios用于数据库请求，Thunk作为中间件处理异步性。我在一个组件中遇到了一个问题，该组件执行一个get请求来检索一个客户列表，这个列表曾经是componentDidMount。无论我尝试什么，useEffect函数都会进入一个无限循环，并继续请求客户列表。
所讨论的组件CustomersTable从数据库中获取客户列表，并将其显示在表中。该组件由容器组件包装，该容器组件使用Redux的connect将检索到的客户列表传递给CustomersTable作为支柱。
useEffect(
浏览 0提问于2019-04-05得票数 3
我正在尝试使用browserHistory.push以编程方式更改页面。在我的一个组件中，而不是在我嵌入其中的组件中。
有人知道为什么我的项目只为子组件而不是父组件抛出错误吗？
无法读取未定义的属性“push”
父组件
import React, {Component} from 'react';
import { browserHistory } from 'react-router';
import ChildView from './ChildView';
class ParentView extends Component {
浏览 1提问于2017-05-07得票数 37
回答已采纳
2回答
我在使用带有数组的useState钩子时遇到了问题。我检查了stackoverflow上的各种资源，但无法修复它。 我的基本代码片段如下所示： const [users, setUsers] = useState([]);
function addNewContact(user) {
const newUsers = [...users,user];
console.log(newUsers);
setUsers(newUsers);
} <CardContainer users={users}></CardContainer> cl
浏览 23提问于2021-09-25得票数 0
回答已采纳
2回答
我正在制作一个web应用程序，用户在图像中的对象周围绘制包围框。
如何使用React的本地状态：当用户仍在绘图时(即在mouseUp之前的mouseMove中)，我存储矩形的属性。
如何使用Redux的全局存储：一旦mouseUp触发，绘图就结束了，并且不再对矩形进行更新。我想要将这个矩形“提交”到Redux。
这是处理状态管理的正确和/或规范的方式吗？
我还希望将React和Redux状态(即当前正在绘制的矩形以及已经在中“提交”的矩形)传递给子组件。
在react-redux的mapStateToProps中，这是可能的吗?在mapStateToProps中，我似乎找不到将
浏览 1提问于2017-11-18得票数 7
回答已采纳
1回答
我使用React + Redux + Redux-Saga。
在我的场景中，我调用了两个apis -针对Config和针对数据(在获取Config之后)
我在调用数据时遇到问题。长话短说：
这是有效的：
TestRoute.jsx文件(尚未使用isConfig )：
import React from 'react';
import { connect } from 'react-redux';
import TestComponent from '../components/Test';
const Test = ({ isConfig })
浏览 3提问于2018-12-05得票数 1
我正在使用功能组件和Redux来管理状态。简单地说，我希望即使状态改变，渲染也不会发生。首先，代码如下。这是一个简单的解释代码。
const NOUPDATE = ({ uploadAnswer, noState }) => (
<>
<div className="content">
<div className="container">
<p className="directions" />
<ul className=
浏览 0提问于2019-08-13得票数 1
回答已采纳
当我用this.props.addChannel(payload);运行代码时，通道组件一直在重新渲染，就像它在无限循环中一样。
当我用console.log(payload)替换它时，它工作得很好。
const mapStateToProps = state => ({
user: state.shared.user,
});
const mapDispatchToProps = dispatch => ({
addChannel: (payload) => dispatch({type:ADD_CHANNEL, payload})
});
class
浏览 0提问于2017-10-14得票数 1
1回答
我有两个组件子组件和父组件，这个子组件的角色是星等评级，现在我想从子组件中获取要在父组件中显示的值，并使用来自子组件的数据。
添加:我使用Redux并响应导航2.0
子组件
import React, { Component } from 'react';
//import react in our code.
import {
StyleSheet,
View,
Platform,
Text,
Image,
TouchableOpacity,
} from 'react-native';
class Rate extends Co
浏览 0提问于2019-06-14得票数 2
我正在使用React和react-router和react-redux。当一个组件挂载时，我会分派从数据库中获取数据。我的父组件有这个
const TopComp = React.createClass({
componentWillMount(){
this.props.dispatch(getData(this.params.id))
},
render() {
<ChildComp data={this.props.data} />
}
})
function mapStateToProps(state){
return {data:stat
浏览 0提问于2016-03-24得票数 1
3回答
我已经在我的Redux应用程序中实现了React，到目前为止，这是很好的工作，但我有一个小问题。
我的导航栏中有一个选项可以更改存储在locale中的redux's state。当我更改它时，我希望每个组件都会改变转换。要做到这一点，我必须指定
locale: state.locale
在mapStateToProps函数中。这会导致大量的代码重复。
是否有一种方法可以隐式地将区域设置传递到每个使用connect的react-redux组件的支持中？
提前感谢！
浏览 9提问于2016-06-27得票数 3
回答已采纳
我必须渲染几张标签。它的ONclick，它应该被突出显示。我有来自还原器的tabList对象(硬编码值)。单击一个选项卡就会生成一个动作，它用单击的选项卡对象设置"state“(我称之为"activeTab")。
在呈现tabList (所有选项卡)时，我正在检查"rendered_tabid == active_tabid“，然后添加一个类"active”(它是条件基)
active-tab-reducer.js
export const tabReducer = () => {
return [
{
id:
浏览 3提问于2016-08-30得票数 1
回答已采纳
我的redux状态部分(reducer)之一是filters reducer，用于存储每页的过滤器设置。它是key-object结构，所以看起来像这样：
{
dashboard: {
minDate: '2017-01-01',
maxDate: '2019-01-01',
//... other filters
},
otherPageKey: {
//... other filters
}
}
我的仪表板页面很大，但它包含从reducer：filters.dashboard.minDate读取的
浏览 0提问于2019-01-24得票数 0
我有一个连接到父容器的react组件。容器有mapStateToProps。我在容器中有一个控制台日志。道具正在更新。我可以在组件/子组件中看到属性更新。
未调用componentDidUpdate。我不知道在不调用componentDidUpdate的情况下怎么可能调用渲染。但这种情况正在发生。我在我的屏幕上看到组件更新，我有道具console.logged，他们正在更新。但componentDidUpdate并非如此。我觉得我疯了。
以前有没有人经历过这种情况？？
浏览 6提问于2018-08-02得票数 1
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
实时音视频活动推荐
腾讯云开发者
