React redux 不同步 mapStateToProps 中的 props答案

【问题标题】：React redux do not sync props in mapStateToPropsReact redux 不同步 mapStateToProps 中的 props
【发布时间】：2019-07-06 03:02:11
【问题描述】：

我正在使用带有 firebase 实时数据库的 React redux。在 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）：

动作

export function allPosts() {
    return (dispatch) => {  
firebase.database().ref('posts/').on('value', (snapshot) => {
        dispatch({type: "ALL_POSTS", postsArray: snapshot.val(), loading: false})
    })
    }
}

然后我正在组合减速器（我知道在这种情况下没有必要）：

const rootReducer = combineReducers({
    allPosts: postsReducer
})

我的减速器是这样的：

减速器

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);

这里在执行渲染方法时，this.props.post 未定义，我有错误：

TypeError: 无法读取未定义的属性“标题”。

问题是：当应用程序第一次加载时，props.post 是未定义的（所以我有一个错误），大约 1 秒后它接收到值但它没有改变任何东西 - 错误仍然存在并且该值未显示。谁能帮帮我？

【问题讨论】：

你能注释掉 <h2>{this.props.post.title}</h2> 并返回 null 看看你的 console.log 语句是否曾经从 redux 存储中选择值
它最终从redux store中获取值，但是当rednder执行时它还没有值。
检查我的答案，如果其他部分都很好，意味着你应该先尝试确认post不是未定义的
话虽如此，post: state.allPosts.allPosts[postId] 你确定吗？ allPosts 似乎是一个数组。除非它是一个对象（在这种情况下，将 initialState 更改为类似：{}）

标签： javascript reactjs asynchronous firebase-realtime-database redux

【解决方案1】：

假设你的减速器没问题，你可以解决这个问题

改变这个

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>
        )
    }

【讨论】：

【解决方案2】：

您将 allPosts 定义为一个数组

    const initialState = {
    allPosts: []
    }

但您正试图像访问对象一样访问它。

state.allPosts.allPosts[postId]

因此，如果您的 state.allPosts.allPosts 是一个数组，请尝试使用 ES6 find() 方法从包含 postId 的数组中获取帖子。

假设

state.allPosts.allPosts = [
   {postId: 1,title:'abcd'},
   {postId:2,title:'def'}
]
 state.allPosts.allPosts.find(post => postId === post.postId)

【讨论】：