[英]React redux do not sync props in mapStateToProps
I am using React redux with firebase realtime database. 我正在将React redux与Firebase实时数据库一起使用。 In App.js I am dispatching an action fetchAllPosts
在App.js中,我调度了一个动作fetchAllPosts
App.js App.js
class App extends Component {
componentDidMount() {
this.props.fetchAllPosts();
}
render() {
return (
<div className="App">
// something ...
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
fetchAllPosts: () => {dispatch(allPosts())}
}
}
My action looks like this (I am using redux-thunk): 我的动作如下所示(我正在使用redux-thunk):
action 行动
export function allPosts() {
return (dispatch) => {
firebase.database().ref('posts/').on('value', (snapshot) => {
dispatch({type: "ALL_POSTS", postsArray: snapshot.val(), loading: false})
})
}
}
Then I am combining reducers (I know in this case it is not necessary): 然后,我正在组合减速器(我知道在这种情况下没有必要):
const rootReducer = combineReducers({
allPosts: postsReducer
})
My reducer looks like this: 我的减速器看起来像这样:
reducer 减速器
const initialState = {
allPosts: []
}
const postsReducer = (state = initialState, action) => {
switch(action.type) {
case "ALL_POSTS" :
console.log("action payload all posts", action.postsArray)
return {
...state,
loading: false,
allPosts: action.postsArray
}
break;
default:
return state
}
return state
}
And finally: my SinglePostview component looks like this: SinglePostview.js 最后:我的SinglePostview组件如下所示: SinglePostview.js
import React, {Component} from 'react';
import {connect} from 'react-redux';
class SinglePostview extends Component {
render() {
console.log("ppp", this.props)
return (
<h2>{this.props.post.title}</h2>
)
}
}
const mapStateToProps = (state, ownprops) => {
const postId = ownprops.match.params.postid
return {
post: state.allPosts.allPosts[postId]
}
}
export default connect(mapStateToProps)(SinglePostview);
Here when the render method is executing, this.props.post
is undefined and I have the error: 在这里,当执行render方法时, this.props.post
是未定义的,并且出现错误:
TypeError: Cannot read property 'title' of undefined. TypeError:无法读取未定义的属性“ title”。
The problem is: when the app loads for the first time, props.post
is undefined (so I have an error) and after about 1 second it receives the value but it doesn't change anything - the error still exists and the value is not displaying. 问题是:当应用程序首次加载时, props.post
是未定义的(所以我有一个错误),大约1秒钟后,它接收到该值,但它没有任何改变-错误仍然存在,并且值是不显示。 Could anyone help me? 有人可以帮我吗?
Assuming your reducer is fine, you can fix this by 假设您的减速器很好,您可以通过以下方法解决此问题
changing this 改变这个
render() {
return (
<h2>{this.props.post.title}</h2>
)
}
To this: 对此:
render() {
if (!this.props.post){
return null;
}
return (
<h2>{this.props.post.title}</h2>
)
}
or 要么
render() {
return (
<h2>{this.props.post && this.props.post.title}</h2>
)
}
You are defining allPosts to be an array 您正在将allPost定义为数组
const initialState = {
allPosts: []
}
But you are trying to access it like an object. 但是您试图像访问对象一样访问它。
state.allPosts.allPosts[postId]
Hence, if your state.allPosts.allPosts is an array , try using the ES6 find() method to get a post from the array with the postId. 因此,如果您的state.allPosts.allPosts是一个数组,请尝试使用ES6 find()方法从具有postId的数组中获取帖子。
Assuming 假设
state.allPosts.allPosts = [
{postId: 1,title:'abcd'},
{postId:2,title:'def'}
]
state.allPosts.allPosts.find(post => postId === post.postId)
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.