Question

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

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

我要么得到这个error: TypeError: Cannot read property 'map' of undefined 或关于对象的错误无效作为React子代。

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

action.js

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

reducer.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)并获得此信息： enter image description here

但是，如果我尝试在其上进行.map映射，则会得到一个错误和“ undefined”，除“ undefined”外，console.log中什么也没有出现。我想我包括了所有必要的代码。如果有人可以提供任何帮助，我将不胜感激。

Answer 1

需要先检查您是否拥有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>
  }

};

从Firebase获取数据时

1 个答案: