Javascript React redux不同步MapStateTrops中的道具

我正在将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())}
  }
}

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

然后，我将合并减速器（我知道在这种情况下不需要）：

我的减速机是这样的：

减速器

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

class App extends Component {
  componentDidMount() {
    this.props.fetchAllPosts();
  }
  render() {
    return (
      <div className="App">
          // something ...
      </div>
    );
  }
}
const mapDispatchToProps = dispatch => {
  return {
      fetchAllPosts: () => {dispatch(allPosts())}
  }
}

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

import React，{Component}来自'React'；
从'react redux'导入{connect}；
类SinglePostview扩展组件{
render（）{
console.log（“ppp”，this.props）
返回(
{this.props.post.title}
)
}
}
const mapStateToProps=（state，ownprops）=>{
const postId=ownprops.match.params.postId
返回{
post:state.allPosts.allPosts[posted]
}
}
导出默认连接（MapStateTops）（SinglePostview）；

在这里，当执行render方法时，

this.props.post

未定义，我有一个错误：

TypeError:无法读取未定义的属性“title”

问题是：当应用程序第一次加载时，

props.post

是未定义的（因此我有一个错误），大约1秒后它收到了值，但没有改变任何东西-错误仍然存在，并且值没有显示。

---

有人能帮我吗？

您正在将所有帖子定义为一个数组

    const initialState = {
    allPosts: []
    }

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

state.allPosts.allPosts[postId]

因此，如果state.allPosts.allPosts是一个数组，请尝试使用ES6 find（）方法从带有postId的数组中获取post

假定

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

---

假设你的减速器是好的，你可以通过

改变这个

render() {
        return (
            <h2>{this.props.post.title}</h2>
        )
    }

render（）{
返回(
{this.props.post.title}
)
}

为此：

render() {
        if (!this.props.post){
            return null;
        }
        return (
            <h2>{this.props.post.title}</h2>
        )
    }

render（）{
如果（！this.props.post）{
返回null；
}
返回(
{this.props.post.title}
)
}

或

render（）{
返回(
{this.props.post&&this.props.post.title}
)
}

你能把

{this.props.post.title}

注释掉吗，然后返回

null

，看看你的

console.log

语句是否从redux存储中选取过值它最终从redux存储中获取了值，但是当redunder执行它时，它还没有值。检查我的答案，如果其他部分都没有问题，意思是你应该首先确认

post

不是未定义的，也就是说，

post:state.allPosts.allPosts[postd]

你确定吗

allPosts

似乎是一个数组。除非它是一个对象（在这种情况下，将

initialState

更改为类似：

{}

）

render() {
        return (
            <h2>{this.props.post && this.props.post.title}</h2>
        )
    }