mapStateToProps不会在渲染中显示状态
mapStateToProps是React Redux中的一个函数，用于将Redux store中的状态映射到组件的props上。它接收两个参数：state和ownProps。
state参数代表Redux store中的状态，ownProps参数代表组件自身的props。mapStateToProps函数会根据state和ownProps返回一个对象，这个对象中的属性将会成为组件的props。
在渲染过程中，mapStateToProps函数会在组件初始化时被调用，并且在Redux store中的状态发生变化时被重新调用。它的返回值会被合并到组件的props中，从而使组件能够访问到Redux store中的状态。
由于mapStateToProps函数只是用于将状态映射到props上，并不直接参与渲染过程，所以它不会在渲染中显示状态。它的作用是将Redux store中的状态传递给组件，使组件能够根据状态进行渲染和更新。
在React Redux中，可以使用connect函数来将mapStateToProps函数与组件进行连接，从而实现状态的映射。connect函数是React Redux提供的一个高阶函数，它接收两个参数：mapStateToProps和mapDispatchToProps。通过connect函数，可以将Redux store中的状态和组件进行绑定，使组件能够访问到Redux store中的状态并进行相应的渲染。
推荐的腾讯云相关产品：腾讯云云服务器（CVM）和腾讯云云数据库MySQL。腾讯云云服务器提供了可靠的计算能力，可以满足各种规模的应用需求；腾讯云云数据库MySQL是一种高性能、可扩展的关系型数据库，适用于各种应用场景。
腾讯云云服务器产品介绍链接地址：https://cloud.tencent.com/product/cvm 腾讯云云数据库MySQL产品介绍链接地址：https://cloud.tencent.com/product/cdb_mysql
相关·内容
mapStateToProps在一个数组中有三个对象，但当传递给render时，它只传递一个对象。如何获取渲染贴图函数中的所有对象...以下是我的代码。 class AppliedCandidates extends Component {
render() {
const {appliedjob} = this.props
console.log('================+++++====================');
console.log("appliedjob ", appliedjob);
cons
浏览 25提问于2019-02-18得票数 0
我有一个应用程序，其中用户可以添加一个元素到时间线(简化为列表)。但是这个动作会分派另外几个动作，其中一个是虚拟生成的元素。实际上，这些元素回答了这个问题:你想在这里添加另一个元素吗？
我的问题是我应该在哪里计算它？例如，我应该在redux中更新状态，还是在mapStateToProps中渲染之前进行计算？如果我应该在mapStateToProps中这样做，请记住其中一个建议被拒绝了。
const TimelineElement = ({type}) => {
switch (type) {
case 'Plane':
浏览 5提问于2018-08-09得票数 1
2回答
我正在尝试通过使用props中的userListIds在状态构造函数中添加selectedUserIds。但是，似乎在执行构造函数的时候，props中的值还没有被设置，因此我得到了null。 但是，当我在渲染开始时打印this.props.userListIds时，它显示得很好。问题出在别的地方。可能的解决方案是什么？代码如下： const mapStateToProps = (state: State, props: OwnProps): PropsFromState => ({
userList: getCompanyTeamListSelector(state),
浏览 22提问于2019-01-07得票数 0
2回答
我一直在构建一个React和Redux应用程序。我创建了一个简单的容器和一个操作创建器，其中包含一个带有简单console.log()的操作，该用户是我在状态(reducer)中写下的用户之一。
问题是，当我单击渲染状态时，它显示'user‘is not defined。为什么？我该怎么做才能让函数识别状态呢？
容器
import React, { Component } from 'react';
import {bindActionCreators} from 'redux';
import {connect} from 'react-red
浏览 13提问于2018-08-13得票数 0
回答已采纳
我有密码
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
回答已采纳
我目前对mapStateToProps()的理解是将当前设置的Redux存储映射到组件中您希望设置的任何支柱。我还知道组件中的props are variables that are passed to the component andstate`‘只是一组正在使用的并发变量。
令我困惑的是，我在许多网站/文档上看到，你永远不应该改变道具。mapStateToProps()确实是在物理上改变组件道具，并且违背了这种精神？
这里有一个场景，假设我们希望在运行某个后端进程时显示一个加载符号，我可以创建一个将设置IS_LOADING= True的分派，如果我想应用这个值来显示组件中的加载程序，我会
浏览 2提问于2019-11-28得票数 2
回答已采纳
2回答
我正在尝试做一个反应应用，在那里我有一个表单，当我提交时，我想显示的数据在屏幕上。我也在使用redux。我对所有这些都是陌生的，所以我不知道如何将数据保存到存储区，然后显示它为。
如果有人能告诉我该怎么做。我想我应该保存表单中的数据，把它传递给商店，但是不知道怎么做。
import React, { Component } from "react";
import { connect } from "react-redux";
import { bindActionCreators } from "redux";
import * as acti
浏览 5提问于2020-03-01得票数 0
回答已采纳
我使用redux-thunk中间件，只有在执行渲染后才能从props接收值。如何在调用render之前在props中设置“Contents”的值？？ UNSAFE_componentWillMount() {
this.getAllArticle();
}
getAllArticle = () => {
this.props.onGetAllArticle(); `
}
render() {
{this.props.contents ? this.props.contents.map((obj, index) => (
浏览 22提问于2019-04-30得票数 0
2回答
当道具更改时进行反应渲染
、、、
我试图在道具只改变的时候渲染我的组件，不幸的是，即使道具没有改变，它也会继续渲染，我的代码如下：
componentDidUpdate(prevProps,prevState){
if(prevProps.data !== this.props.data){
this.props.getData(userID)
}
}
render(){
//console.log('render') infinite rendering even when this.props.data is unchanged
浏览 0提问于2019-06-28得票数 1
2回答
在将操作分派到存储之前，我想调用一个基于promise的函数。问题是，我只想在要显示组件时调用函数。我使用切换操作来打开和关闭组件。
下面是我的代码示例：
if ( /*component is going to be displayed*/) {
init().then(function() {
store.dispatch(toggleSomething());
});
}
else {
store.dispatch(toggleSomething());
}
操作：
export const SomethingActions = {
TOGGLE_SOMETHIN
浏览 2提问于2016-09-12得票数 2
2回答
具有Redux的专用路由
、、、
我正在尝试创建一条检查用户身份验证的私有路由。但私有路由在redux的数据更新之前进行渲染。组件有isauthenticated变量，它最终会更新为true，但组件在更新之前会先呈现。因为在第一次渲染时，redux的值为false。
import React, { Component } from 'react'
import {connect} from 'react-redux'
import {Route, Redirect } from 'react-router-dom'
const PrivateRoute = ({componen
浏览 0提问于2020-05-01得票数 1
我有一个React / Redux应用程序，可以渲染PureComponents网格。我希望组件只在属性值改变时才重新渲染，但实际上所有组件都会在要存储的任何更新时重新渲染。该问题似乎是由数组属性引起的。 我已经在this sandbox中重现了这个问题。在这个最小的示例中，将呈现Cell组件的两个实例。每一个都显示一个单独记录在存储中的值，并且可以通过一个按钮分别递增或递减。 Cell.js import React, { PureComponent } from "react";
import { connect } from "react-redux";
浏览 7提问于2020-01-08得票数 1
回答已采纳
function mapStateToProps (state) {
return {pickupProps:state.BookingData.pickup}
}
// export default Map;
const ScriptLoadedMap = scriptLoader(
[config.MapApi]
)(Map);
export default connect(mapStateToProps,actions)(ScriptLoadedMap);
在这里，我想访问pickupProps.when，我在渲染内部安慰，我得到道具值，但是当我在任何类函数中调用时，第一
浏览 2提问于2018-05-18得票数 1
我的几个同事正在用mapStateToProps传播国家的一部分。 const mapStateToProps = (state = {}) =>
({
addUserForm: { ...state.addUser.addUserForm },
addUserLabels: { ...state.addUser.addUserLabels }
}); 这样做可以吗？它复制了状态的一部分。当实际的Redux状态改变时，组件不会被重新渲染。对吗？如果我说错了，请纠正我。
浏览 14提问于2019-09-13得票数 1
我在父React组件中使用componentDidMount()方法从API中获取一些数据，然后将其保存在redux-state中。
在我的渲染方法中，我有另一个组件，它应该使用全局redux-state中的数据。
我可以通过props向我的子组件发送数据，也可以使用mapStateToProps()加载它们。
如果我试图在我的子组件构造函数或componentDidMount()方法中从属性中console.log或将数据赋值给var，我就得不到预期的数据(我得到的是初始状态)。
我的render方法中的Console.log将在第一次呈现时显示初始状态，在第二次呈现时显示正确的数据。
我需
浏览 5提问于2017-07-07得票数 2
回答已采纳
1回答
我更新了Store，它登录在我的控制台上，但是组件的内容没有改变。我在我的渲染功能中提出问题，这是我的还原剂。我更新问题，但没有任何变化。
function VideoData(state=data, action){
switch(action.type){
case SHOW_QUESTION:
let newstate = state;
newstate.currentQuestion = action.item.currentQuestion;
newstate.currentTime = action.item.currentT
浏览 1提问于2017-10-27得票数 0
回答已采纳
我是Redux的新手，在商店改变后，我遇到了重新渲染的问题。我在这里发现了很多类似的问题，但仍然不能解决我的问题。
我有一个包含多个任务的月度任务(事件)日历。Calendar是主要组件，在某种程度上，还有多个TaskItem组件。在第一次呈现时，日历和任务呈现得很好(在本例中没有员工姓名)。在Calendar组件中，我使用useEffect钩子触发加载员工。我可以在控制台上看到网络请求。除此之外，控制台还会登录该操作，并且在reducer中还会显示员工列表。Redux devtool还显示了加载的员工。尽管如此，TaskItem上的mapStateToProps仍然显示为完全空的状态。
我哪
浏览 16提问于2021-05-19得票数 1
1回答
我正在尝试使用material UI创建一个聊天功能。我创建了一个功能，用户可以发布新的聊天消息，然后通过reducer发送，然后保存在redux存储中。除了新的聊天消息仅在用户刷新页面后才会出现之外，此过程按预期工作。我想知道为什么我的渲染函数没有更新。这是主要的聊天显示。 const ChatFunction = (props) => {
const classes = useStyles();
const { user } = props;
const userMessages = props.userMessages || {};
};
const mapStat
浏览 15提问于2021-08-23得票数 1
回答已采纳
在第一次呈现之前，我有要传递数据的组件。但是我总是先得到一个空数组，然后是初始渲染之后的数据。我使用Redux操作和还原器通过mapStateToProps传递数据。
这件事在这里解决了
浏览 2提问于2018-04-17得票数 0
回答已采纳
访问props对象的属性时遇到问题。我可以通过控制台记录整个对象，但是如果我尝试通过控制台记录属性，它会显示该对象不在那里。 class SingleCase extends Component {
componentDidlMount() {
this.props.getCurrentCase(this.props.location.id);
}
render() {
console.log(this.props.current_case); // This works (Shows the object)
console.log(this.props
浏览 17提问于2020-07-21得票数 0
我正在渲染RootComponent
//RENDERING ROOT COMPONENT-------------------------------------------------------------------------------
ReactDOM.render(
<Provider store={store}>
<RootComponent />
</Provider>,
document.getElementById('app'));
//RENDERING ROOT COM
浏览 3提问于2017-08-17得票数 0
回答已采纳
我已经使用Redux创建了一个React组件，在将状态映射到道具之前，需要进行两次渲染。
使用此代码，
第一次呈现时“user.private”为null，第二次呈现时为false
正因为如此，在显示隐藏内容之前，加载页面会在显示“login”的一秒钟之间闪烁
我希望在默认情况下显示登录文本，但如果用户的private字段设置为false，我实际上不希望显示该文本。
class Content extends React.Component {
render() {
const { user } = this.props;
let show = fal
浏览 0提问于2018-03-23得票数 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
我有redux格式的数组。我在平面表上显示数据。但是，当我编辑数组数据时，平面列表不会重新渲染。我该如何解决这个问题？我检查了我的redux，并且工作正常。 this.props.notes[this.state.Index]={
color: JSON.stringify(BgColor),
date: this.state.fullDate.toString(),
note: this.state.noteText,
浏览 23提问于2019-09-03得票数 2
回答已采纳
1回答
无法访问属性的值
、、
我在控制台上记录渲染函数中的this.props -
在控制台上我可以看到这些-
但是，当我尝试访问其中的任何一个时，假设我想访问store对象，那么如果日志像这样的console.log(this.props.store)。就像这样-
然后我得到了这个-
我不知道我到底做错了什么。如果有人知道我做错了什么，请让我知道。如有任何帮助，我们不胜感激！
整个代码-
import * as React from 'react';
import { connect } from 'react-redux';
import mapStateToProps
浏览 3提问于2018-10-10得票数 1
我试图实现一个绿色，或红色发光行取决于一个数字增加或减少。
实现这一目标的最佳方法是什么？
在mapStateToProps上或者在渲染过程中有什么方法来比较这两者吗？
浏览 2提问于2018-05-22得票数 0
回答已采纳
我想用以下简单的html模板创建一个容器：
<div>
<one />
<two />
<three />
</div>
就这些..。那么，如何使用容器来创建
connect(mapStateToProps,mapDispatchToProps)(ViewComponent);
这样的话，我无法选择定期渲染.
有什么想法吗？
谢谢
浏览 4提问于2016-12-25得票数 1
回答已采纳
我遇到过这样的情况:带有mapStateToProps的容器中的道具正在更新，组件中的道具正在更新(只是一个字符串)，组件正在重新渲染……而componentDidUpdate就是不会爆炸。
下面是我的connect方法：
export default connect(
state => {
console.log("token",state.Auth.idToken);
return {
token: state.Auth.idToken,
isLoggedIn: state.Aut
浏览 72提问于2019-07-31得票数 1
回答已采纳
我正在使用Redux创建一个测验应用程序，其中包含一个带有一些嵌套字段的表单。我刚刚意识到(我认为)，如果我使用子道具，每次按下我的输入框都会触发重新渲染，即像这样设计应用程序：
const keys = Object.keys(state)
<QuizContainer>
{keys.map(key =>
<QuizForm key={key}>
{state[key].questions.map(({ questionId }) =>
<Question key={questionId} qu
浏览 3提问于2018-11-13得票数 1
2回答
我有两个组件。
function Parent(props){
const handleClick = () => {
console.log(props.stateA);
};
return <div><Child text={stateB} handleClick={handleClick} /></div>
}
const mapStateToProps = (state) => {
return {
stateA: state.stateA // stateA will be changed somew
浏览 4提问于2020-09-29得票数 0
2回答
我想知道如何在React中管理复杂的状态，限制那些内容没有改变的组件的渲染调用的数量。
举个例子：
我有简单的连接到redux存储容器组件与“项目”道具(这是数组)。
const Component = ({ items }) => (
<>{items.map(item => <ItemComponent key={item.id} {...item} />}</>
);
const mapStateToProps = state => ({
items: $$data.select.items(state),
});
浏览 39提问于2019-06-18得票数 4
2回答
我目前正在关注教程。在下面的代码中，我遇到了一个涉及mapStateToProps的小问题：
import React from 'react';
import Voting from './voting';
import {connect} from 'react-redux';
const mapStateToProps = (state) => {
return {
pair: state.getIn(['vote','pair']),
winner: state.get('
浏览 3提问于2016-08-16得票数 34
回答已采纳
在我的应用程序中，我使用react-redux-firebase版本的2.5.1和redux-firestore版本的^0.13.0。我呈现一个与客户的对话列表(称为线程)，每次用户转到另一个线程时，直到线程被加载，我希望他看到一个正在加载的微调器。我的问题是，只有当我在应用程序部署后第一次转到线程时，旋转器才会显示，在那之后，每次我更改线程时，方法isLoaded总是真的，即使我看到页面显示前一个线程有几秒钟。有没有人遇到过这样的问题，可以帮我解决？ 这是我的组件 const mapStateToProps = (state, props) => {
const custom
浏览 11提问于2020-09-28得票数 1
回答已采纳
3回答
在redux存储有任何数据之前，正在呈现一个问题。
这个问题是由在现有的角度应用程序将数据发送到存储区之前呈现给页面的React组件造成的。我不能改变渲染的顺序或者类似的东西。
我的简单反应组件是
import React, {Component} from 'react';
import { connect } from 'react-redux';
import {addBot} from './actions';
class FlowsContainer extends React.Component {
componentDid
浏览 3提问于2017-05-05得票数 3
回答已采纳
我需要在渲染应用程序之前检查身份验证状态
我在index.js中像这样运行该操作：
import ReactDOM from 'react-dom';
import "bootstrap/dist/css/bootstrap.css";
import App from './App';
import reportWebVitals from './reportWebVitals';
import store from './store/index';
import { Provider } from 're
浏览 0提问于2021-03-12得票数 2
1回答
我有文章的组成部分：
import React, { Component } from 'react';
import { connect } from 'react-redux';
import ArticleList from "../ArticlesListApp";
class Articles extends Component {
render() {
const { articleList } = this.props;
return (
<ArticleList list={articleL
浏览 4提问于2018-04-17得票数 2
我说的是mapStateToProps关于的论点。
我的一个组件有一个名为rules的属性，它是一个函数数组。在mapStateToProps中，我调用这些规则，传入当前状态。如果没有错误，规则要么返回错误消息，要么返回true。我将这些错误消息放入一个新的支柱中，以便最终组件接收一个错误消息数组，而不是一个函数数组。
到目前为止，这是很好的工作，但现在我想增加对异步规则的支持。我现在的计划是，每当规则返回一个承诺而不是一个错误字符串时，我就会推送一条类似于“Checking.”的消息。相反，在错误消息数组中，但是一旦承诺得到解决，我需要“刷新”这个数组并插入已解析的消息。
我想如果我可以，那
浏览 3提问于2017-01-26得票数 3
这是我的组件。它会在第一次渲染。随后，即使render被调用，它也不会更改DOM。
Render在正确的时间被调用，因为我已经设置了redux，并且我的'mapStateToProps‘似乎工作正常，因为它检测到应用程序状态的变化，并调用render()。
控制台日志确实记录了字符串已更改的事实。
你可能希望看到更多的代码，但我希望我在这里遗漏了一个基本的概念，有人可以指出。我不知道如何把我的整个项目放在这里。谢谢。再一次，render会被调用，所以它不应该更新DOM吗？
import React from 'react';
import { Component } f
浏览 1提问于2016-08-23得票数 4
MapStateToProps和useSelector都使用类似的回调store => store.group，可以安全地修改这些值，例如在MapStateToProps中：
const mapStateToProps = store => {
const { group, level } = store;
let { group } = store;
if (level > 50) {
group = `${group}-admin`;
}
return { group };
};
或者在useSelector中：
const group = u
浏览 0提问于2020-09-18得票数 0
回答已采纳
我在我的路由组件上使用static fetchData方法.
const mapStateToProps = (state) => ({
posts: state.posts
})
@connect(mapStateToProps)
class Blog extends Component {
static fetchData (dispatch) {
return dispatch(fetchPosts())
}
render () {
return (
<PostsList posts={this.props.posts} /&
浏览 4提问于2016-03-26得票数 7
我有一个带有React导航的React Native应用程序，我需要根据Redux状态显示或隐藏一个选项卡。我正在使用createBottomTabNavigator，并编写了以下代码：
function createTabNavigator(props:TabNavigatorProps){
debugger;
const isClient = WHAT_TO_PUT_HERE??
const tabs = isClient
? {
//something
}
: {
//something else
}
return createBotto
浏览 3提问于2019-08-28得票数 5
我已经在Redux & React工作了几个月了。我通常使用Chrome都没有问题。(实际上是无休止的bug :) )。
当我开始在Firefox中测试时，我遇到了一个问题，我需要一些帮助……要知道是否有一个完美的方法来处理这个问题。
当构造函数被调用时，MapStateToProps的Redux Props还不可用，这意味着我不能在组件构造函数中构造我的组件状态。这些道具很快就可以在渲染功能中使用了。在这个阶段，为时已晚，因为我不能在渲染函数中构造状态(以某种方式可以工作，但不是很好，对吧?)。
目前，我使用componentWillReceiveProps并复制我的构造函数，但有一
浏览 0提问于2018-10-12得票数 0
因此，我收到一个错误，说明.map是未定义的，因为我假设this.props.action没有完成，因此使得.map无法映射任何东西。
减速机
case GET_DEALERSHIP_GOAL_TYPE_SUCCESS:
return Object.assign({}, state, {
loading: false,
dealershipGoalType: action.payload.data
});
mapStateToProps
const mapStateToProps = state => ({
dealershi
浏览 2提问于2020-08-18得票数 1
回答已采纳
2回答
我在这里的目标是在useEffect中调用操作。 const ShowTodos = (props) =>{
useEffect(()=>{
props.fetchTodos()
},[])
}
const mapStateToProps = (state)=>{
return {
todos:Object.values(state.todos),
currentUserId:state.authenticate.userId
}
}
export default connect(mapStateToProps,{fetchT
浏览 25提问于2019-04-30得票数 6
回答已采纳
1回答
有没有办法在渲染时自动注入深度嵌套的实体数据？
const mapStateToProps = (state, ownProps) => {
let boardId = ownProps.params.id
return {
id: boardId,
// is there an easier method to do this?
comments: state.entities.boards[boardId].comments.map(id => {
return Object.assign({}, state.entities.co
浏览 0提问于2016-05-16得票数 1
我是个新手。我有一个产品页面组件，这是一个页面显示特定的产品。我尝试做的是这个ProductPage在产品中找到特定的产品(这是一个存储为道具的对象数组)，并在渲染它之前将其保存为状态。 我得到了这些错误。我无法从数组中筛选出单个产品。 1) currentProduct is not defined.
2)Error: Maximum update depth exceeded. This can happen when a component repeatedly calls setState inside componentWillUpdate or componentDidUpdat
浏览 34提问于2020-12-27得票数 0
回答已采纳
我正在使用React、Redux和React-Redux提供程序函数
const mapStateToProps = (store: any) => {
console.log("mapStateToProps", store.textTwo);
return store.textTwo;
};
如果我使用上面的mapStateToProps函数来connect react-redux的方法，并更新状态，它将console.log更改mapStateToProps函数，但不会重新呈现组件，甚至不会出现componentWillReceiveProps钩子。
浏览 15提问于2020-02-17得票数 0
我学习React Redux时遇到了一些问题。
在下面的代码中，我使用mapStateToProps来侦听更改，并使用mapDispatchToProps发送通知。当Store发生变化时，我会发送通知。为了让它起作用，我必须把这个Helper放在App.jsx的render()方法中，即使这样做，下面的Helper组件代码也不会向App.jsx添加任何东西。我学习了React，想知道如何更改这个Notefication.js，以便它侦听mapStateToProps，并且可以在不将其添加到App.jsx render()的情况下执行mapDispatchToProps。
仅仅为了让mapSta
浏览 12提问于2019-07-06得票数 1
回答已采纳
我从api中获取GameChart的数据，并更改redux状态。在GameChart.jsx文件中，当componentDidUpdate调用时，我绘制图表。但是，redux状态更改有时不调用componentDidUpdate。
控制台GameChart.jsx生命周期日志
GameChart.jsx控制台日志，当componentDidUpdate没有调用时(它神奇地发生在50/50的概率.)：
Chart mapStateToProps
Chart componentDidMount
Chart mapStateToProps
当redux状态更改时，GameChart.j
浏览 3提问于2019-12-16得票数 3
我的react App上有一个嵌套组件。 class Home extends React.Component {
constructor() {
super();
this.state = {id : "1"};
}
render() {
return <ShowChart id={this.state.id}/>;
}
} 我从主页渲染组件ShowChart，并将this.state.id作为一个道具传递。ShowChart是一个带有redux connect()的组件。 class ShowChart extends
浏览 171提问于2021-05-02得票数 0
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
实时音视频
对象存储
即时通信 IM活动推荐
腾讯云开发者
