我正在使用 React redux 和 firebase 实时数据库。
在 App.js 中,我正在调度一个操作 fetchAllPosts
App.js
class App extends Component {
componentDidMount() {
this.props.fetchAllPosts();
}
render() {
return (
<div className="App">
// something ...
</div>
);
}
}
const mapDispatchToProps = dispatch => {
return {
fetchAllPosts: () => {dispatch(allPosts())}
}
}
我的操作看起来像这样(我正在使用 redux-thunk):
Action
export function allPosts() {
return (dispatch) => {
firebase.database().ref('posts/').on('value', (snapshot) => {
dispatch({type: "ALL_POSTS", postsArray: snapshot.val(), loading: false})
})
}
}
然后我组合 reducer (我知道在这种情况下没有必要):
const rootReducer = combineReducers({
allPosts: postsReducer
})
我的 reducer 是这样的:
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
}
最后:我的 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);
这里当 render 方法执行时,this.props.post
是未定义的,我有错误:
TypeError: Cannot read property 'title' of undefined.
问题是:当应用程序第一次加载时,props.post
是未定义的(所以我有一个错误)并且在大约 1 秒后它接收到值但它没有改变任何 - 错误仍然存在并且未显示值。
谁能帮帮我?
最佳答案
假设你的 reducer 没问题,你可以通过以下方式解决这个问题
改变这个
render() {
return (
<h2>{this.props.post.title}</h2>
)
}
对此:
render() {
if (!this.props.post){
return null;
}
return (
<h2>{this.props.post.title}</h2>
)
}
或
render() {
return (
<h2>{this.props.post && this.props.post.title}</h2>
)
}
关于javascript - React redux 不同步 mapStateToProps 中的 Prop ,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/54650534/