时间戳

首页 > 解决方案 > 从 Firebase 获取数据时尝试在 React-Redux 中对 props 进行映射时出错

reactjs - 从 Firebase 获取数据时尝试在 React-Redux 中对 props 进行映射时出错

问题描述

我一直在试图解决这个问题，但我不知道我做错了什么。我已设置 React-Redux 以从 Firebase 导入/编辑数据。我可以获取数据，但似乎无法映射到数据库以使用每个数据库项。每个项目都将是一个对象，其中包含有关北方国家小径上问题的各种数据。它将有名称、位置、描述等...

我可以从 Firebase 访问数据。我可以console.log在数组中包含每个跟踪对象的信息。我无法让它显示在屏幕上。

我得到这个error: TypeError: Cannot read property 'map' of undefined 或关于 Objects are not valid as a React child 的错误。

以下是我的一些相关代码：

动作.js

 export const fetchTrailItems = () => async dispatch => {
  trailItemsRef.on("value", snapshot => {
    dispatch({
      type: FETCH_TRAILITEMS,
      payload: snapshot
    });
  });
};

减速器.js

  const snapshotToArray = snapshot => {
  let returnArr = [];

  snapshot.forEach(function(childSnapshot) {
    let item = childSnapshot.val();
    item.key = childSnapshot.key;

    returnArr.push(item);
  });

  return returnArr;
};

    const getTrailData = (state = [], action) => {
  switch (action.type) {
    case FETCH_TRAILITEMS:
      const newData = snapshotToArray(action.payload);
      console.log(newData);
      return { ...state, trailItems: newData };
    default:
      return state;
  }
};

    const rootReducer = combineReducers({
  form: formReducer,
  auth: authReducer,
  trailwork: trailworkReducer,
  trailData: getTrailData
});

export default rootReducer;

TrailWorkList.js

    import React from "react";
import TrailworkItem from "./TrailworkItem";
import { connect } from "react-redux";
import * as actions from "../actions";

class TrailworkList extends React.Component {
  componentDidMount() {
    this.props.fetchTrailItems();
  }

  renderTrailList = () => {
    console.log(this.props.trailData.trailItems);
    return this.props.trailData.trailItems.map(trailItem => {
      return (
        <p>{trailItem}</p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  };

  render() {
    return (
      <div className="ui relaxed divided list">
        Hi Im a list
        {this.renderTrailList()}
      </div>
    );
  }
}

const mapStateToProps = state => {
  return {
    trailData: state.trailData
  };
};

export default connect(mapStateToProps, actions)(TrailworkList);

我可以console.log(this.props.trailData.trailItems)得到这个： 在此处输入图像描述

但是，如果我尝试对其进行 .map 处理，我只会收到一个错误和“未定义”，并且除了“未定义”之外什么都没有出现console.log。我想我包含了所有必要的代码。如果有人可以提供任何帮助，我将不胜感激。

标签： reactjsfirebaseredux

解决方案

需要先检查是否有this.props.trailData。

renderTrailList = () => {
  console.log(this.props.trailData.trailItems);
  if (this.props.trailData) {
    return this.props.trailData.trailItems.map(trailItem => {
      return ( <
        p > {
          trailItem
        } < /p>
        // <TrailworkItem trailItem={trailItem} key={this.props.trailItem.key} />
      );
    });
  } else {
    return <p > Loading < /p>
  }

};

推荐阅读