时间戳

首页 > 解决方案 > 无法读取 Redux + Firebase 中未定义的属性“名称”

reactjs - 无法读取 Redux + Firebase 中未定义的属性“名称”

问题描述

问题document来自 Firestore 无法在 React 组件中显示。最初，我像这样在 Redux 中获取项目。

src/actions/index.js

export function fetchItem(id) {
  return dispatch => {
    itemsRef.doc(id).onSnapshot(doc => {
      usersRef.doc(id).onSnapshot(user => {
        statusesRef
          .where("uid","==", id)
          .onSnapshot(function(querySnapshot) {
            querySnapshot.forEach(function(snapshot) {
                const allItems = {
                  item: doc.data(),
                  user: user.data(),
                  status: snapshot.data(),
                };
                dispatch({
                  type: FETCH_ITEM,
                  payload: allItems
                });
            }
          }
      });
    });
  };
}

src/reducers/reducer_items.js

import { FETCH_ITEM } from "../actions";

const initialState = {};

export default (state = initialState, action) => {
  switch (action.type) {
    case FETCH_ITEM:
      return action.payload;

    default:
      return state;
  }
};

然后我allItems用this.props.fetchItem.

class Item extends Component {
  componentDidMount() {
     const { id } = this,proops.match.params;
     this.props.fetchItem(id);
  }
}

render() {
   const { item } = this.props;
   console.log("item", item);
}

const mapDispatchToProps = {
  fetchItem
};

function mapStateToProps({ allItems }) {
  return { item: allItems };
}

export default connect(mapStateToProps, mapDispatchToProps)(Item);

控制台中的项目是

item:
Object
item: {name: "XXXXXXXXX", image: "XXXXXXXXXXX"}
status: {content: "XXXXXXXXX"}
user: {name: "XXXXXXXX", image: "XXXXXXXXXXXX"}

我可以成功获取item项目、用户和状态。但我无法获得儿童文件。

render() {
   const { item } = this.props;
   console.log("item", item);
   console.log("item2", item.item.name);
}

它说Cannot read property 'name' of undefined。但名称显示在console.log("item").

标签： reactjsfirebasereduxgoogle-cloud-firestore

解决方案

我认为这不是最佳实践，但我已经用下面的代码解决了它：

const allItems = {
  ...doc.data(),
  ...user.data(),
  ...snapshot.data(),
};

推荐阅读