mapstatetoprops更新state但props不更新渲染的问题

最新推荐文章于 2022-12-09 17:31:46 发布
最新推荐文章于 2022-12-09 17:31:46 发布
阅读量974 收藏
点赞数
文章标签： javascript ui ViewUI
原文链接：http://www.cnblogs.com/zxh2459917510/p/11168315.html
版权

通过react-redux和redux实现react组件之间的通信,reducer、action、store都编写正确,mapDispatchToProps也能正确传值.唯独mapStateToProps的return出现了问题

reduce

action

connect绑定

 

 组件渲染

本来的需求是登陆成功组件获得新的props，随之更新img和div内容，但是却发现在mapstatetoprops函数中，state确实能够实时更新，但props却只显示第一次的内容，不会随着更新，也就是说组件不会重新渲染，登陆成功之后依然显示未登录，网上查找各种方式都没有效果，最后是改变量名的方法解决的，之前出错的代码是这样写的

return的时候props属性名和state属性名一样，但将props属性名换掉之后就正常了

转载于:https://www.cnblogs.com/zxh2459917510/p/11168315.html

admin9740
关注
react-interview-questions：300+ React面试问题
02-05
- `actions`：描述发生了什么，但不包含如何改变状态。 - `reducers`：纯函数，根据action和当前state计算新的state。 - `connect()`：Redux提供的函数，将React组件与store连接，提供`mapStateToProps`和`...
vuex state数据是数组或者对象时，数据更新，视图没更新的解决办法
pingmin的博客
04-23 865
vue框架， vuex state数据是数组或者对象时，数据更新，视图没更新的解决办法
2021-08-11用来解决vuex中state状态发生改变后。页面不刷新的问题。
jiaohuang2442的博客
08-11 1435
用来解决vuex中state里的状态发生改变后。页面不刷新的问题。 解决方案：mapState 语法糖 在组件中引入 import { mapState } from ‘vuex’ 在组件计算属性： 计算属性监听vuex中state里的值。 computed:mapState( { orgType () { return this.$store.state.userID }, orgName () { return this.$store.state.userName }, valueA: 'va
Vue组件之间的多种通信方式 $emit和props、mapState和mapMutations、$ref和$refs
qq_44933075的博客
05-20 471
在使用Vue进行复杂组件开发的时候，下面是几种常见的组件通信方式emit、prop 配合是最常用的方式，另外还有就是 $ref 和$refs进行控制，还有就是通过缓存机制的Vuex 的mapMutations、mapState ，第一:父组件与子组件之间传递 prop 传递数据 $emit 事件（单双层页面传递）第二：不同页面相互之间通信 ，Vuex的 mapState mapMutations（多页面公用）第三：通过dom 进行通信$ref 和 $refs 方法 （父组件对子组件的控制）...
React 之 mapStateToProps（)方法详解
pure_light's Blog
03-01 1万+
React 之 mapStateToProps( )方法详解 最近开发项目，项目用到：react与Antd。 其中：React 中每个类 后都会有一个 mapStateToProps() 方法。很好奇这个方法的用处。 这个方法很好理解： 中文意思大概是： 将 State 数据转换到 Props 中； 那就要看State 与Props 到底是什么玩意。 State ：这个是每个类都包含的...
react-redux中高阶组件connect的mapStateToProps不持续更新的问题
qq_37488630的博客
05-30 1301
问题： Form = connect( //这里的userInfo可以持续更新 console.log(state.userInfo); state=>{ return{ userInfo:state.userInfo }; }, dispatch=>{ return {...
example-react-native-redux：React本机redux计数器示例
02-05
`connect`函数将组件与store连接起来，提供`mapStateToProps`和`mapDispatchToProps`方法，以便组件能够获取状态和触发actions。 7. **生命周期方法**：在React Native组件中，我们可以利用生命周期方法如`...
react-cheat-sheet：:books:日常使用的完美的React Cheat Sheet，带有许多Javascript JSX片段！
02-04
3. **状态和属性**：组件的状态（state）是可变的，而属性（props）是从父组件传递到子组件的不可变数据。 4. **生命周期方法**：React组件有多个生命周期方法，如`componentDidMount`、`shouldComponentUpdate`和`...
react-redux中connect()方法详细解析
08-30
1. `mapStateToProps(state, [ownProps]): stateProps`（可选）： 这个函数用于从Redux store中选择需要的数据，并将其作为props传递给组件。`state`参数是Redux store的完整状态树，`ownProps`是组件自身的props。...
react-redux
最新发布
04-04
`connect()` 接收两个可选参数，`mapStateToProps` 和 `mapDispatchToProps`，分别用于将 store 的 state 映射到组件 props 和将 dispatch 方法映射到组件 props。 - `mapStateToProps(state, ownProps)`：这个...
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
YY的博客
12-09 393
用vuex mapState时新写法会出现的错误和注意事项（渲染不出来页面的原因）
react-9 state ， props 和 map 循环渲染的简单描述
cvper's world !
02-20 1746
之前简单学习了react 组件是怎么写的，比如下面这个： import React from 'react'; import './intro.css'; export default class Intro extends React.Component { render(){ return( <div>我是简介页面</di...
React依赖注入说明（mapStateToProps/mapDispatchToProps）
让优秀成为一种习惯
03-20 2万+
本博客主要来讲一下React依赖注入说明，其中涉及到mapStateToProps()和mapDispatchToProps()两种方法。
mapStateToProps，mapDispatchToProps的使用详解
热门推荐
suwu150
03-01 4万+
前言 刚接触redux的时候，发现大家对mapDispatchToProps使用有几种方法，而且都跑通了，本文来介绍下，redux的mapStateToProps，mapDispatchToProps的一些使用方式。 mapStateToProps（state, ownProps） mapStateToProps是一个函数，用于建立组件跟 store 的 state 的映射关系 作为一个函...
React-Redux流程中，mapStateToProps的理解
weixin_38178584的博客
08-29 9776
        mapStateToProps方法就是容器组件向store声明需要的state的地方，因为我们的store是整个应用只有一份，根据redux的思想通过context可以保证每一个组件都可以从context中获取到store，不需要一级一级的从顶层传递下来。所以，一般容器组件上会有这个函数负责通过context获取到store中想要的state，即从store中获取到的state相当...
Redux 学习笔记（二）
pepping798的专栏
08-21 3071
要将 Redux 和 React 结合起来使用，就还需要一些额外的工具，其中最重要的是 react-redux 。react-redux 提供了两个重要的对象，Provider 和 connect，前者使 React 组件可被连接（connectable），后者把 React 组件和 Redux 的 store 真正连接起来。redux 的基本用法通过 reducer 创建一个 store，每当我们
mapStateToProps
boysky0015的博客
03-23 2581
mapStateToProps 是一个函数(函数名可以自定义)，它的作用就像它的名字那样，建立一个从（外部的）state对象到（UI组件的）props对象的映射关系。 作为函数，mapStateToProps执行后应该返回一个对象，里面的每个键值就是一个映射。 如下所示： function mapStateToProps(state) { return { count: s...
终于react-redux mapStateToProps props不更新的坑
奇乐软件开发踩坑日志
05-16 2809
也不知道对不对，反正数据出来了，心情激动啊，在这个问题上绕了好几天了， 问题描述： const mapStateToProps = state => ({ 在这里console.log可以看到state里有数据，但是props里始终是空的。 items: state.videoReducer.items }); export default connect(m...
react 用this.props.dispatch调用后端接口
06-13
在React中使用this.props.dispatch调用后端接口，也需要借助redux-thunk中间件来处理异步操作。下面是一个简单的例子： ```javascript // 定义一个异步action creator export const fetchData = () => { return async (dispatch) => { dispatch({ type: 'FETCH_DATA_REQUEST' }); try { const response = await fetch('/api/data'); const data = await response.json(); dispatch({ type: 'FETCH_DATA_SUCCESS', payload: data }); } catch (error) { dispatch({ type: 'FETCH_DATA_FAILURE', payload: error }); } }; } // 在组件中使用dispatch调用异步action creator import { connect } from 'react-redux'; import { fetchData } from './actions'; class MyComponent extends React.Component { componentDidMount() { // 调用异步action creator this.props.dispatch(fetchData()); } render() { // 根据store中的状态渲染组件 const { isLoading, data, error } = this.props; if (isLoading) { return <div>Loading...</div>; } else if (error) { return <div>Error: {error.message}</div>; } else { return ( <div> <ul> {data.map(item => ( <li key={item.id}>{item.name}</li> ))} </ul> </div> ); } } } const mapStateToProps = state => ({ isLoading: state.isLoading, data: state.data, error: state.error, }); export default connect(mapStateToProps)(MyComponent); ``` 在上面的例子中，fetchData是一个异步action creator，它返回一个函数，这个函数接收一个参数：dispatch。在函数内部，我们可以使用dispatch方法来分发多个同步action，以更新store中的状态。在组件中，我们通过connect函数将store中的状态映射为props属性，然后在componentDidMount中使用this.props.dispatch调用该方法，以触发异步操作。当异步操作完成后，根据store中的状态渲染组件。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值